[Bug]: Youtube Thumbnail doesn't load - Content Security Policy (CSP)

[TextZip]

Describe the bug
I am using the youtube-workflow from here but the video thumbnails appear to be broken.

Expected behavior
The video thumbnails usually do load but in the last few days, they appear to be broken.
The profile can be seen live here.

Screenshots

Workflow Yml Used

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="https://i.ytimg.com/vi/$videoId/mqdefault.jpg"></a></td>$newline<td><a href="$url">$title</a><br/>$date</td></tr></table>$newline'
          committer_email: "textzip@gmail.com"

Additional context
I found the following security issue when I did a page inspection.

Any help on how to fix this would be greatly appreciated, thanks in advance.

[gautamkrishnar]

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: "textzip@gmail.com"

[TextZip]

@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:textzip@gmail.com" 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?

[gautamkrishnar]

@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.

[gautamkrishnar]

@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.

[gautamkrishnar]

@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: "textzip@gmail.com"

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.