The Content-Security-Policy header must not be overridden

[sebbASF]

beam/website/www/site/static/.htaccess

Line 30 in 64a92b2

Header set Content-Security-Policy "frame-src 'self' https://play.beam.apache.org/ https://www.youtube.com/ https://drive.google.com/ ;"

The Content-Security-Policy header must not be overridden.

There is now a standard way to add local exceptions to the CSP:

https://infra.apache.org/tools/csp.html

Please update the .htaccess file accordingly

[damccorm]

Our first attempt to do this caused website rendering issues (see #36679). When we attempt this again, we should try running https://github.com/apache/beam/actions/workflows/beam_Publish_Website.yml from the PR branch and waiting a few minutes to see if it causes issues before merging

[sebbASF]

In case it helps, I've just updated the Attic Docker image to make it easy to test the effect of using CSP_PROJECT_DOMAINS.

Details are in https://github.com/apache/attic/blob/main/DOCKER.md

The basic commands are:

docker compose build

VAR_HOSTURL=https://beam.apache.org CSP_PROJECT_DOMAINS="host1 host2" docker compose up

Navigate to localhost:8000

If you enable browser debugging, you should be able to see if there are any CSP errors in the console log.

[sebbASF]

I just tried, and it looks like the rendering issue was caused by failure to load the file https://unpkg.com/swiper@8/swiper-bundle.min.css

Hosting this locally should solve that issue.
There are also attempts to load some external fonts and css etc; these should also be hosted locally.

Make sure the license for the resource allows local hosting.
If not, you will need to replace it with something that does allow local hosting.

[shunping]

@damccorm, is there any other step we need to take here?

[damccorm]

If I understand the last comment from @sebbASF it looks like we need to save at least the swiper css file in https://github.com/apache/beam/tree/master/website/www/site/assets and reference it from there instead of loading it

@shunping would you mind following up and trying that?

[shunping]

In case it helps, I've just updated the Attic Docker image to make it easy to test the effect of using CSP_PROJECT_DOMAINS.

Details are in https://github.com/apache/attic/blob/main/DOCKER.md

The basic commands are:

docker compose build

VAR_HOSTURL=https://beam.apache.org CSP_PROJECT_DOMAINS="host1 host2" docker compose up

Navigate to localhost:8000

If you enable browser debugging, you should be able to see if there are any CSP errors in the console log.

I followed the instructions and was able to find the list of things that are currently violating the CSP.

• Violation to Content Security Policy directive: "style-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https://www.apachecon.com/ https://www.communityovercode.org/ https://*.apache.org/ https://apache.org/ https://*.scarf.sh/ https://play.beam.apache.org/ https://www.youtube.com/ https://drive.google.com/"
  • https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700
    • OFL license. Local hosting is allowed if needed. https://github.com/google/fonts/blob/22b0ac176f77fda75367df052785d126fa828557/ofl/roboto/OFL.txt#L49-L50
  • https://use.fontawesome.com/releases/v5.4.1/css/all.css
    • Font is OFL license, and css is MIT license. Local hosting is allowed if needed.
  • https://unpkg.com/swiper@8/swiper-bundle.min.css
    • MIT license. Local hosting is allowed if needed.
• Violation to Content Security Policy directive: "script-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https://www.apachecon.com/ https://www.communityovercode.org/ https://*.apache.org/ https://apache.org/ https://*.scarf.sh/ https://play.beam.apache.org/ https://www.youtube.com/ https://drive.google.com/"
  • https://code.jquery.com/jquery-2.2.4.min.js
    • MIT license.
  • https://platform.twitter.com/widgets.js
    • X Platform Widgets. Should not locally host it.
  • https://static.hotjar.com/c/hotjar-2182187.js?sv=6
    • The tracking script for Hotjar, which is a commercial Software as a Service (SaaS) platform. Should not locally host it.
  • https://cse.google.com/cse.js?cx=012923275103528129024:4emlchv9wzi
    • Google Programmable Search Engine (formerly Custom Search Engine or CSE) Element Control API. Should not locally host it.
• Violation to Content Security Policy directive: "default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval' https://www.apachecon.com/ https://www.communityovercode.org/ https://*.apache.org/ https://apache.org/ https://*.scarf.sh/ https://play.beam.apache.org/ https://www.youtube.com/ https://drive.google.com/"
  • https://fonts.gstatic.com/ {googlesymbols, googlematerialicons, googlesans, googlesanstext}
    • Proprietary Google Fonts. Should not locally host them.

---

In summary, I think we can locally host the following items:

• https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700
• https://use.fontawesome.com/releases/v5.4.1/css/all.css
• https://unpkg.com/swiper@8/swiper-bundle.min.css
• https://code.jquery.com/jquery-2.2.4.min.js

We will also need to add the following exceptions to CSP

• https://platform.twitter.com/widgets.js
• https://static.hotjar.com/c/hotjar-2182187.js?sv=6
• https://cse.google.com/cse.js?cx=012923275103528129024:4emlchv9wzi
• https://fonts.gstatic.com/

@damccorm, @sebbASF: does it sound good to you?

[damccorm]

Yeah, that sounds reasonable