CDN and other external references

I embed YouTube clips and and I reference bootstrap.css from a CDN.

Errors

The errors appearing in dev tools' Network tab are the following:

• (blocked:csp) for the bootstrap.min.css
• (blocked:origin) for the YouTube videos

Solution bootstrap.css

I now host the bootstrap.css on my server, instead of referencing it from a CDN.

OLD:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

NEW:

<link href="../../../../twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Solution YouTube clips

Ths solution for YouTube videos was twofold:

• a change in the FOSWIKI configuration
• a change in the iframe markup

1 Foswiki configuration

• FOSWIKI / Configure
• Security and Authentication
• HTTP Security Headers
• {Http}{ContentSecurityPolicy}{'frame-src'}: add https://www.youtube.com to it:

OLD

'self' vnd.sun.star.webdav: ms-word: ms-excel: ms-powerpoint: ms-access: ms-infopath: ms-publisher: ms-visio: ms-project:

NEW

'self' https://www.youtube.com vnd.sun.star.webdav: ms-word: ms-excel: ms-powerpoint: ms-access: ms-infopath: ms-publisher: ms-visio: ms-project:

2.1 iframe markup

Add referrerpolicy="strict-origin-when-cross-origin" to your iframe elements:

OLD

<iframe width = "380"
height = "214"
src = "https://www.youtube.com/embed/byTiWe9Ysc8"
title = "Nek - mobiliserend: hoofd draaien"
frameborder = "0"
allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>

NEW

<iframe width = "380"
height = "214"
src = "https://www.youtube.com/embed/byTiWe9Ysc8"
title = "Nek - mobiliserend: hoofd draaien"
frameborder = "0"
allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy = "strict-origin-when-cross-origin"
allowfullscreen></iframe>

2.2 Use the OEmbedPlugin instead of an iframe.

In my quest for a solution, I discovered the OEmbedPlugin.

It still requires the frame-src directive to be changed in the Foswiki configuration, but it doesn't require the referrerpolicy.

%EMBED{"https://www.youtube.com/embed/byTiWe9Ysc8" width="380"}%

results in:

Trials before solution

First, I tried to solve it in Apache instead of in Foswiki:

sudo a2enmod headers
a2restart

And adding the following line to wiki.bousard.be-le-ssl.conf:

Header set Content-Security-Policy "style-src 'self' 'unsafe-inline'"

Sources:

• https://content-security-policy.com/unsafe-inline/
• https://scotthelme.co.uk/content-security-policy-an-introduction/

bron: https://www.mariamiddelares.be/nl/zorgaanbod/behandelingen-en-testen/oefeningen-nek