1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/content/base/test/csp/test_CSP_inlinestyle.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,142 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<head>
1.7 + <title>Test for Content Security Policy inline stylesheets stuff</title>
1.8 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.9 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.10 +</head>
1.11 +<body>
1.12 +<p id="display"></p>
1.13 +<div id="content" style="display: none">
1.14 +</div>
1.15 +
1.16 +<iframe style="width:100%;height:300px;" id='cspframe'></iframe>
1.17 +<iframe style="width:100%;height:300px;" id='cspframe2'></iframe>
1.18 +<iframe style="width:100%;height:300px;" id='cspframe3'></iframe>
1.19 +<script class="testbody" type="text/javascript">
1.20 +
1.21 +var path = "/tests/content/base/test/csp/";
1.22 +
1.23 +
1.24 +//////////////////////////////////////////////////////////////////////
1.25 +// set up and go
1.26 +SimpleTest.waitForExplicitFinish();
1.27 +
1.28 +var done = 0;
1.29 +
1.30 +// Our original CSP implementation does not block inline styles.
1.31 +function checkStyles(evt) {
1.32 + var cspframe = document.getElementById('cspframe');
1.33 + var color;
1.34 +
1.35 + // black means the style wasn't applied. green colors are used for styles
1.36 + //expected to be applied. A color is red if a style is erroneously applied
1.37 + color = window.getComputedStyle(cspframe.contentDocument.getElementById('linkstylediv'),null)['color'];
1.38 + ok('rgb(0, 255, 0)' === color, 'External Stylesheet (original CSP implementation) (' + color + ')');
1.39 + color = window.getComputedStyle(cspframe.contentDocument.getElementById('inlinestylediv'),null)['color'];
1.40 + ok('rgb(0, 255, 0)' === color, 'Inline Style TAG (original CSP implementation) (' + color + ')');
1.41 + color = window.getComputedStyle(cspframe.contentDocument.getElementById('attrstylediv'),null)['color'];
1.42 + ok('rgb(0, 255, 0)' === color, 'Style Attribute (original CSP implementation) (' + color + ')');
1.43 + // SMIL tests
1.44 + color = window.getComputedStyle(cspframe.contentDocument.getElementById('xmlTest',null))['fill'];
1.45 + ok('rgb(0, 255, 0)' === color, 'XML Attribute styling (SMIL) (' + color + ')');
1.46 + color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssOverrideTest',null))['fill'];
1.47 + ok('rgb(0, 255, 0)' === color, 'CSS Override styling (SMIL) (' + color + ')');
1.48 + color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssOverrideTestById',null))['fill'];
1.49 + ok('rgb(0, 255, 0)' === color, 'CSS Override styling via ID lookup (SMIL) (' + color + ')');
1.50 + color = window.getComputedStyle(cspframe.contentDocument.getElementById('cssSetTestById',null))['fill'];
1.51 + ok('rgb(0, 255, 0)' === color, 'CSS Set Element styling via ID lookup (SMIL) (' + color + ')');
1.52 + checkIfDone();
1.53 +}
1.54 +
1.55 +// When a CSP 1.0 compliant policy is specified we should block inline
1.56 +// styles applied by <style> element, style attribute, and SMIL <animate> and <set> tags
1.57 +// (when it's not explicitly allowed.)
1.58 +function checkStylesSpecCompliant(evt) {
1.59 + var cspframe = document.getElementById('cspframe2');
1.60 + var color;
1.61 +
1.62 + // black means the style wasn't applied. green colors are used for styles
1.63 + //expected to be applied. A color is red if a style is erroneously applied
1.64 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('linkstylediv'),null)['color'];
1.65 + ok('rgb(0, 255, 0)' === color, 'External Stylesheet (CSP 1.0 spec compliant) (' + color + ')');
1.66 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('inlinestylediv'),null)['color'];
1.67 + ok('rgb(0, 0, 0)' === color, 'Inline Style TAG (CSP 1.0 spec compliant) (' + color + ')');
1.68 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('attrstylediv'),null)['color'];
1.69 + ok('rgb(0, 0, 0)' === color, 'Style Attribute (CSP 1.0 spec compliant) (' + color + ')');
1.70 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('csstextstylediv'),null)['color'];
1.71 + ok('rgb(0, 255, 0)' === color, 'cssText (CSP 1.0 spec compliant) (' + color + ')');
1.72 + // SMIL tests
1.73 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('xmlTest',null))['fill'];
1.74 + ok('rgb(0, 0, 0)' === color, 'XML Attribute styling (SMIL) (' + color + ')');
1.75 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('cssOverrideTest',null))['fill'];
1.76 + ok('rgb(0, 0, 0)' === color, 'CSS Override styling (SMIL) (' + color + ')');
1.77 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('cssOverrideTestById',null))['fill'];
1.78 + ok('rgb(0, 0, 0)' === color, 'CSS Override styling via ID lookup (SMIL) (' + color + ')');
1.79 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('cssSetTestById',null))['fill'];
1.80 + ok('rgb(0, 0, 0)' === color, 'CSS Set Element styling via ID lookup (SMIL) (' + color + ')');
1.81 +
1.82 + color = window.getComputedStyle(cspframe2.contentDocument.getElementById('modifycsstextdiv'),null)['color'];
1.83 + ok('rgb(0, 255, 0)' === color, 'Modify loaded style sheet via cssText (' + color + ')');
1.84 +
1.85 + checkIfDone();
1.86 +}
1.87 +
1.88 +// When a CSP 1.0 compliant policy is specified we should allow inline
1.89 +// styles when it is explicitly allowed.
1.90 +function checkStylesSpecCompliantAllowed(evt) {
1.91 + var cspframe = document.getElementById('cspframe3');
1.92 + var color;
1.93 +
1.94 + // black means the style wasn't applied. green colors are used for styles
1.95 + // expected to be applied. A color is red if a style is erroneously applied
1.96 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('linkstylediv'),null)['color'];
1.97 + ok('rgb(0, 255, 0)' === color, 'External Stylesheet (CSP 1.0 spec compliant, allowed) (' + color + ')');
1.98 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('inlinestylediv'),null)['color'];
1.99 + ok('rgb(0, 255, 0)' === color, 'Inline Style TAG (CSP 1.0 spec compliant, allowed) (' + color + ')');
1.100 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('attrstylediv'),null)['color'];
1.101 + ok('rgb(0, 255, 0)' === color, 'Style Attribute (CSP 1.0 spec compliant, allowed) (' + color + ')');
1.102 +
1.103 + // Note that the below test will fail if "script-src: 'unsafe-inline'" breaks,
1.104 + // since it relies on executing script to set .cssText
1.105 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('csstextstylediv'),null)['color'];
1.106 + ok('rgb(0, 255, 0)' === color, 'style.cssText (CSP 1.0 spec compliant, allowed) (' + color + ')');
1.107 + // SMIL tests
1.108 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('xmlTest',null))['fill'];
1.109 + ok('rgb(0, 255, 0)' === color, 'XML Attribute styling (SMIL) (' + color + ')');
1.110 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('cssOverrideTest',null))['fill'];
1.111 + ok('rgb(0, 255, 0)' === color, 'CSS Override styling (SMIL) (' + color + ')');
1.112 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('cssOverrideTestById',null))['fill'];
1.113 + ok('rgb(0, 255, 0)' === color, 'CSS Override styling via ID lookup (SMIL) (' + color + ')');
1.114 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('cssSetTestById',null))['fill'];
1.115 + ok('rgb(0, 255, 0)' === color, 'CSS Set Element styling via ID lookup (SMIL) (' + color + ')');
1.116 +
1.117 + color = window.getComputedStyle(cspframe3.contentDocument.getElementById('modifycsstextdiv'),null)['color'];
1.118 + ok('rgb(0, 255, 0)' === color, 'Modify loaded style sheet via cssText (' + color + ')');
1.119 +
1.120 + checkIfDone();
1.121 +}
1.122 +
1.123 +function checkIfDone() {
1.124 + done++;
1.125 + if (done == 3)
1.126 + SimpleTest.finish();
1.127 +}
1.128 +
1.129 +SpecialPowers.pushPrefEnv(
1.130 + {'set':[["security.csp.speccompliant", true]]},
1.131 + function() {
1.132 + // save this for last so that our listeners are registered.
1.133 + // ... this loads the testbed of good and bad requests.
1.134 + document.getElementById('cspframe').src = 'file_CSP_inlinestyle_main.html';
1.135 + document.getElementById('cspframe').addEventListener('load', checkStyles, false);
1.136 + document.getElementById('cspframe2').src = 'file_CSP_inlinestyle_main_spec_compliant.html';
1.137 + document.getElementById('cspframe2').addEventListener('load', checkStylesSpecCompliant, false);
1.138 + document.getElementById('cspframe3').src = 'file_CSP_inlinestyle_main_spec_compliant_allowed.html';
1.139 + document.getElementById('cspframe3').addEventListener('load', checkStylesSpecCompliantAllowed, false);
1.140 + }
1.141 +);
1.142 +</script>
1.143 +</pre>
1.144 +</body>
1.145 +</html>
