Last active
May 25, 2021 15:39
-
-
Save nfreear/d8d3507448c356328604dd80594e58dc to your computer and use it in GitHub Desktop.
Draft Content-Security-Policy - for OU Media Player.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> <title> Content-Security-Policy test </title> | |
| <base href="https://mediaplayer.open.ac.uk/" /> | |
| <meta | |
| http-equiv="Content-Security-Policy" | |
| content=" | |
| default-src 'self' 'unsafe-inline' https://*.open.ac.uk ; | |
| frame-ancestors 'self' https://*.open.ac.uk http://*.open.ac.uk https://*.open.edu ; | |
| script-src 'self' 'unsafe-inline' https://*.open.ac.uk https://*.googleapis.com ; | |
| " | |
| /> | |
| <meta | |
| name="X-My-CSP-Draft" | |
| content=" | |
| img-src https://* ; | |
| media-src ... ; | |
| child-src 'none' ; | |
| frame-src 'none' ; | |
| script-src 'self' 'unsafe-inline' https://*.googleapis.com ; | |
| " | |
| /> | |
| <style> | |
| p, pre { border: .2rem solid #bbb; font-size: 1.2rem; margin: 1rem 0 2rem; padding: .6rem; } | |
| pre { font-size: small; } | |
| tt { font-size: large; } | |
| iframe, video { width: 100%; height: 25rem; } | |
| .status-ok #status { background: #cfc; border-color: green; } | |
| .status-error #status { background: pink; border-color: red; } | |
| #open-edu { background: gray; } | |
| #ou-header a.ou-logo { | |
| X-float: left; | |
| display: block; | |
| X-margin: 20px 0 0 0; | |
| height: 57px; | |
| width: 82px; | |
| background-image: url(/ouheaders/gui/England.svg?2.0.0.89); | |
| background-size: 82px 57px; | |
| X-position: relative; | |
| overflow: hidden; | |
| } | |
| #ou-header a.ou-logo img { | |
| border: 0; | |
| top: 0; | |
| X-position: relative; | |
| width: 258px; | |
| visibility: hidden; | |
| } | |
| </style> | |
| <h1> Content-Security-Policy test </h1> | |
| <p id="status"></p> | |
| <pre id="csp"></pre> | |
| <h2> Test logo <tt>(www.open.ac.uk)</tt></h2> | |
| <p id="ou-header"> | |
| <a class="ou-logo england" href="https://www.open.ac.uk/" title="The Open University"> | |
| <img src="https://www3.open.ac.uk/ouheaders/gui/sprite.png?1.1.1.69" srcset="https://www3.open.ac.uk/ouheaders/gui/sprite.png?1.1.1.69 1x, /ouheaders/gui/sprite-x3.png?1.1.1.69 2x" alt="The Open University"> | |
| </a> | |
| </p> | |
| <h2> Test <tt><iframe></tt> </h2> | |
| <p> | |
| <iframe src="https://mediaplayer.open.ac.uk/embed/pod/student-experiences/db6cc60d6b"></iframe> | |
| </p> | |
| <h2> Test image <tt>(podcast.open.ac.uk)</tt> </h2> | |
| <p> | |
| <img alt="Test image" src="https://podcast.open.ac.uk/feeds/student-experiences/OULIFE_student_00147.jpg" /> | |
| </p> | |
| <h2> Test image <tt>(open.edu)</tt> </h2> | |
| <p id="open-edu"> | |
| <a href="https://www.open.edu/openlearn/" title="OpenLearn"> | |
| <img alt="OpenLearn" src="https://www.open.edu/openlearn/sites/all/themes/openlearnng/logo.png" /> | |
| </a> | |
| </p> | |
| <h2> Test <tt><video></tt> </h2> | |
| <p> | |
| <video | |
| id="player1" | |
| controls="controls" preload="none" | |
| poster="https://podcast.open.ac.uk/feeds/student-experiences/OULIFE_student_00147.jpg"> | |
| <source type="video/mp4" src="https://podcast.open.ac.uk/feeds/student-experiences/openings-being-an-ou-student.m4v"> | |
| <track kind="subtitles" srclang="en" type="text/vtt" src="https://mediaplayer.open.ac.uk/timedtext/webvtt?url=http://podcast.open.ac.uk/feeds/student-experiences/closed-captions/openings-being-an-ou-student.xml" /> | |
| [Fallback] | |
| </video> | |
| </p> | |
| <script | |
| src="https://www3.open.ac.uk/ouheaders/js/headerfooter.min.js?1.1.1.69" | |
| integrity="sha384-UR7J1ENs7E5+aTmwFaH4NtZDUEe5wLPs5DURUl0vP4xoO00z8ovUsarKDLtorbVQ" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script | |
| src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" | |
| integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" | |
| crossorigin="anonymous" | |
| ></script> | |
| <script integrity="sha256-daEdpEyAJIa8b2VkCqSKcw8PaExcB6Qro80XNes/sHA="> | |
| // Error handler! | |
| const timeoutId = setTimeout(() => { | |
| if (!window.$) { | |
| document.querySelector('#status').textContent = 'jQuery has NOT loaded :(.'; | |
| document.body.classList.add('status-error'); | |
| } | |
| }, | |
| 3000); | |
| // Success handler! | |
| jQuery(($) => { | |
| const POLICY = $('meta[ http-equiv = Content-Security-Policy ]').attr('content'); | |
| $('body').addClass('status-ok'); | |
| // Handler for .ready() called. | |
| console.warn('Hello jQuery! v', $.fn.jquery, $.fn); | |
| $('#status').text(`jQuery has loaded OK! (v${$.fn.jquery})`); | |
| $('#csp').text(`Content-Security-Policy:\n${POLICY}`); | |
| // clearTimeout(timeoutId); | |
| }); | |
| </script> | |
| <pre> | |
| NDF, 25-May-2021. | |
| * https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP | |
| * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors | |
| * https://developer.mozilla.org/en-US/docs/Glossary/Navigation_directive | |
| * https://mediaplayer.open.ac.uk/ | |
| * https://www.open.ac.uk/about/validation-partnerships/supporting-information/academic-reviewers | |
| </pre> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment