[Bug]: Youtube Thumbnail doesn't load - Content Security Policy (CSP) about blog-post-workflow HOT 5 CLOSED

Actually, the thumbnail itself is working, its just the GitHub cache messing up. https://i.ytimg.com/vi/4cc_2OeSXDw/mqdefault.jpg AFAIK There is nothing we can do to fix it other than hard reloading. GitHub may refetch it sometime in the future.

Alternatively, try using a new URL:

name: Latest YouTube Videos
on:
  schedule:
    # Runs every hour, on the hour
    - cron: '15 10 * * *'
  workflow_dispatch:

jobs:
  update-readme-with-youtube:
    name: Update this repo's README with latest videos from YouTube
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          comment_tag_name: "YOUTUBE"
          feed_list: "https://www.youtube.com/feeds/videos.xml?channel_id=UCYcGVOtMxDEnXQs5AMjZFYA"
          custom_tags: "channelId/yt:channelId/,videoId/yt:videoId/"
          date_format: "mmm d, yyyy"
          template: '<table><tr><td><a href="$url"><img width="140px" src="http://img.youtube.com/vi/$videoid/maxresdefault.jpg"></a></td>$newline<td><a href="$url">$title</a><br/>$date</td></tr></table>$newline'
          committer_email: "[email protected]"

from blog-post-workflow.

@gautamkrishnar thanks for taking time out,

Actually, the thumbnail itself is working, its just the GitHub cache messing up. https://i.ytimg.com/vi/4cc_2OeSXDw/mqdefault.jpg

Yes, the thumbnail itself on its own works, I can even do something like this <img align="right" alt="GIF" src="https://i.ytimg.com/vi/4cc_2OeSXDw/mqdefault.jpg" width="1491" /> and the image displays correctly in my profile. But the same URL breaks when used as a thumbnail inside the youtube video table.

AFAIK There is nothing we can do to fix it other than hard reloading.

By that, if you mean force-reloading the browser, I have tried but it doesn't seem to have any effect.

Alternatively, try using a new URL:

I have tried the alternative URL and it also doesn't seem to have any effect.

Furthermore, as I mentioned in the original comment I notice the following page errors when I use inspect

And I see that the images are clearly blocked as seen here
With the new alternative URL

With the old URL

I also noticed that even some static social media icons like <a href="mailto:[email protected]" target="blank"><img align="center" src="https://cdn.worldvectorlogo.com/logos/official-gmail-icon-2020-.svg" alt="jai.krishna.7982" height="30" width="40" /></a> that are not generated through the workflow are also blocked.

All these errors do not appear when I inspect Dexters-Hub's profile page

And finally, I have noticed that the thumbnail generated in Dexters-Hub have the following syntax:
<a href="https://www.youtube.com/watch?v=fj73bxmP03g" rel="nofollow"><img width="140px" src="https://camo.githubusercontent.com/0de5f98908c15d176b2610718bd5b97490be612643f43321e699d39dc1abfe8e/68747470733a2f2f692e7974696d672e636f6d2f76692f666a373362786d503033672f6d7164656661756c742e6a7067" data-canonical-src="https://i.ytimg.com/vi/fj73bxmP03g/mqdefault.jpg" style="max-width: 100%;"></a>

whereas similar thumbnails from my profile load like this:
<a href="https://www.youtube.com/watch?v=YXFAZwNgo7Y" rel="nofollow"><img width="140px" src="https://i.ytimg.com/vi/YXFAZwNgo7Y/mqdefault.jpg" style="max-width: 100%;"></a>

they do not have data-canonical-src or even githubusercontent.com.

Given all this do you still think it's due to a mess up with GitHub cache?

from blog-post-workflow.

@TextZip thanks for looking into it. Looks like it is most probably something that is related to CSP. Can you please contact GitHub support and ask them why its not working for your use case and working for https://github.com/Dexters-Hub/Dexters-Hub/tree/master. I now think that this is not related to cache. The code generated by the workflow is the same for you and Dexters-Hub since you both are using the same code. The only difference is that, the github markdown parser is parsing the generated content somehow differently. Parser is beyond the scope of this project.

from blog-post-workflow.

@TextZip I tried copying your whole readme to a private repo. It also didn't load for me. Something changed recently with Github CSP. Please contact https://support.github.com/request?tags=dotcom-direct

I am pretty sure that this is broken for thousands of other GitHub users, not just you or the users of this workflow.

from blog-post-workflow.

@TextZip i also just noticed that the code i suggested you had a bug. Can you pls try the following one:

name: Latest YouTube Videos
on:
  schedule:
    # Runs every hour, on the hour
    - cron: '15 10 * * *'
  workflow_dispatch:

jobs:
  update-readme-with-youtube:
    name: Update this repo's README with latest videos from YouTube
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          comment_tag_name: "YOUTUBE"
          feed_list: "https://www.youtube.com/feeds/videos.xml?channel_id=UCYcGVOtMxDEnXQs5AMjZFYA"
          custom_tags: "channelId/yt:channelId/,videoId/yt:videoId/"
          date_format: "mmm d, yyyy"
          template: '$newline<table><tr><td><a href="$url"><img width="140px" src="http://img.youtube.com/vi/$videoId/maxresdefault.jpg"></a></td>$newline<td><a href="$url">$title</a><br/>$date</td></tr></table>'
          committer_email: "[email protected]"

This works fine for me except the first thumbnail is not rendering. Rest looks good. Contacting Github maybe still needed to resolve the issue of the first one.

from blog-post-workflow.