Closed dac514 closed 6 years ago
This works in the cloud reader but not in the Chrome app (explanation in a separate comment below). Here is how to test with the cloud reader:
1) Load the cloud reader URL ( https://readium.firebaseapp.com ) in web browsers (in my case: Firefox, Chrome and Safari on MacOS). 2) Drag the EPUB file from the filesystem (in my case: Finder file explorer) onto the browser window(s), and drop the EPUB file when the blurry purple border appears (same visual indicator as the Chrome app, actually). 3) Navigate to the spine item that contains the dynamic poem (i.e. last "page" of the publication). 4) Observe that the random text paragraph is present.
The problem comes from Google's Chrome web browser, or more precisely the default CSP (Content Security Policy) of the Chrome extensions / apps framework which does not allow inline scripts, as reported in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource: 'wasm-eval'".
The solution is to move your Javascript from the body of OEBPS/chapter-001-chapter-1.xhtml
into its own file (e.g. poem-script.js
), and to add a link
to it inside the head
of the HTML document.
<script>
// <![CDATA[
function capitalizeFirstLetter( string ) {
return string.charAt( 0 ).toUpperCase() + string.slice( 1 );
}
function poemTest() {
var matrix = [
[ "heartbreaking", "imploding", "wandering", "homecoming", "consuming", "vanishing", "glowering", "combusting", "concealing", "congealing" ],
[ "pale", "bold", "cold", "wild", "white", "blue", "dead", "sad", "ripe", "slow" ],
[ "stars", "steps", "stones", "sacs", "cells", "trucks", "homes", "trees", "debts", "tears" ],
[ "reverberate", "reactivate", "concatenate", "initiate", "eliminate", "internalize", "communicate", "invigorate", "incinerate", "menstruate" ],
[ "hope", "love", "fire", "shit", "fear", "waste", "shame", "light", "breath", "hate" ],
[ "perseverance", "bulimia", "embarrassment", "metastasis", "phagocytes", "fermentations", "sociopaths", "suburbanites", "sublimation", "indifference" ],
[ "floating", "freezing", "branding", "waking", "turning", "pissing", "grasping", "boiling", "slicing", "taking" ],
[ "perfection", "difference", "corruption", "sollitude", "indolence", "nullity", "happiness", "ignorance", "thoughtlessness", "usefulness" ],
[ "above", "onto", "into", "over", "against", "upon", "within", "inside", "around", "beside" ],
[ "absence", "rigor", "vapor", "clover", "default", "Gaia", "nothing", "consent", "silence", "disgust" ],
];
var poem = '';
for ( var i = 0, len = matrix.length; i < len; i++ ) {
var min = 0;
var max = matrix[ i ].length - 1;
var random = Math.floor( Math.random() * (max - min + 1) ) + min;
poem += matrix[ i ][ random ] + ' ';
}
var div = document.getElementById( "poemdiv" );
div.textContent = capitalizeFirstLetter( poem ).trim() + '.';
}
window.onload = poemTest;
// ]]>
</script>
Note that the Readium Chrome app cannot enable unsafe-inline
in the CSP:
Chrome extensions will let you relax the default Content Security Policy; Chrome Apps won’t.
https://developer.chrome.com/apps/contentSecurityPolicy#what
This issue is a Bug
Expected Behaviour
When I open the test file in Readium EPUB reader for Chrome I expect javascript to generate a random poem like it does in iBooks.
Observed behaviour
The placeholder text is not replaced.
Steps to reproduce
Test file(s)
A zip inside a zip...
Poem-1524859228._3.epub.zip
Product