Skip to content

Instantly share code, notes, and snippets.

@clarkio

clarkio/CSP Harlem Shake Test Instructions.txt

Last active September 2, 2024 07:20
Show Gist options
  • Save clarkio/32c7dba41dfb3418eaf1 to your computer and use it in GitHub Desktop.
Save clarkio/32c7dba41dfb3418eaf1 to your computer and use it in GitHub Desktop.
Download ZIP
Test script to paste in dev tools console that demonstrates how a CSP can help
Raw
CSP Harlem Shake Test Instructions.txt
// Originally provided here: http://pastebin.com/aJna4paJ
1. Go to Google Chrome
2. Go to any website (works cool on facebook)
3. Right click anywhere -> Inspect Element
4. Click on the rightmost "Console" tab.
5. Copy paste the following * into the console.
6. Make sure the volume isn't too loud!
7. Press Enter.
8. If the audio doesn't play and/or elements on the page don't move then the site has properly implemented a CSP
Text to copy into the "Console" tab:
(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML=" <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\\b"+s+"\\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()
Raw
csp-harlem-shake-test.js
(function() {
function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
}, 100)
}
function d(e) {
return {
height: e.offsetHeight,
width: e.offsetWidth
}
}
function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}
function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}
function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w
}
function S() {
var e = document.createElement("audio");
e.setAttribute("class", l);
e.src = i;
e.loop = false;
e.addEventListener("canplay", function() {
setTimeout(function() {
x(k)
}, 500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
}, 15500)
}, true);
e.addEventListener("ended", function() {
N();
h()
}, true);
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.play()
}
function x(e) {
e.className += " " + s + " " + o
}
function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length;) {
e[n].className = e[n].className.replace(t, "")
}
}
var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
})()
Raw
the-css-in-case-its-deleted.css
/* from https://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css */
/* .im_drunk, .im_baked, .im_trippin, .im_blown */
.mw-strobe_light {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100000;
background-color: rgba(250,250,250,0.8);
display: block;
}
.mw-harlem_shake_me {
transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-webkit-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
-ms-animation: spin 1s infinite linear;
}
.mw-harlem_shake_slow {
transition: all 3.2s ease-in-out;
-moz-transition: all 3.2s ease-in-out;
-webkit-transition: all 3.2s ease-in-out;
-o-transition: all 3.2s ease-in-out;
-ms-transition: all 3.2s ease-in-out;
animation: spin 4s infinite linear;
-moz-animation: spin 4s infinite linear;
-webkit-animation: spin 4s infinite linear;
-o-animation: spin 4s infinite linear;
-ms-animation: spin 4s infinite linear;
}
/*
Animate.css - http://daneden.me/animate
Licensed under the ☺ license (http://licence.visualidiot.com/)
But we have it modified for our use.
*/
body {
-webkit-backface-visibility: hidden;
}
.mw-harlem_shake_me {
-webkit-animation-duration: .4s;
-moz-animation-duration: .4s;
-o-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.mw-harlem_shake_slow {
-webkit-animation-duration: 1.6s;
-moz-animation-duration: 1.6s;
-o-animation-duration: 1.6s;
animation-duration: 1.6s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.flash, .mw-strobe_light {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
0%, 100% {-o-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake, .im_baked {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
.swing, .im_drunk {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-15%) rotate(-4deg); }
30% { -webkit-transform: translateX(12%) rotate(3deg); }
45% { -webkit-transform: translateX(-9%) rotate(-2deg); }
60% { -webkit-transform: translateX(6%) rotate(2deg); }
75% { -webkit-transform: translateX(-3%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes wobble {
0% { -moz-transform: translateX(0%); }
15% { -moz-transform: translateX(-15%) rotate(-5deg); }
30% { -moz-transform: translateX(12%) rotate(3deg); }
45% { -moz-transform: translateX(-9%) rotate(-3deg); }
60% { -moz-transform: translateX(6%) rotate(2deg); }
75% { -moz-transform: translateX(-3%) rotate(-1deg); }
100% { -moz-transform: translateX(0%); }
}
@-o-keyframes wobble {
0% { -o-transform: translateX(0%); }
15% { -o-transform: translateX(-15%) rotate(-5deg); }
30% { -o-transform: translateX(12%) rotate(3deg); }
45% { -o-transform: translateX(-9%) rotate(-3deg); }
60% { -o-transform: translateX(6%) rotate(2deg); }
75% { -o-transform: translateX(-3%) rotate(-1deg); }
100% { -o-transform: translateX(0%); }
}
@keyframes wobble {
0% { transform: translateX(0%); }`
15% { transform: translateX(-15%) rotate(-5deg); }
30% { transform: translateX(12%) rotate(3deg); }
45% { transform: translateX(-9%) rotate(-3deg); }
60% { transform: translateX(6%) rotate(2deg); }
75% { transform: translateX(-3%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
.wobble, .im_first {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
-o-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
0% { -moz-transform: scale(1); }
50% { -moz-transform: scale(1.1); }
100% { -moz-transform: scale(1); }
}
@-o-keyframes pulse {
0% { -o-transform: scale(1); }
50% { -o-transform: scale(1.1); }
100% { -o-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse, .im_blown {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
@-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(.3);
}
50% {
opacity: 1;
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(.9);
}
100% {
-o-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn, .im_trippin {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
@MInecrafterPictures
Copy link

This code is dead, but I managed to resurrect it:
javascript:(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML="

If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.

";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\b"+s+"\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="//web.archive.org/web/20130407040755if_/s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//web.archive.org/web/20130407040759if_/s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment