I admit, I still find it unintuitive to think as you do @bochaco - I hadn’t thought of your solution (using ‘require’ and using npm to run the app like that), so very helpful to see that!
I think Will and I are still in “old school” thinking, but this is not entirely bad because it is easier to understand what is going on. Using npm to do the work can make the steps easier to get through though.
node.js/npm is just a lot to get your head around, so a barrier in other ways, and clearly I still haven’t got there yet. Gabriel, you and @joshuef are showing me the way with it, so again thanks!
Will, I like your questions to Josh as well. Please keep thinking the way you are, trying to make these steps easier for new folk, because it could have a big impact IMO.
I see, in that case, perhaps this is the translation of the guide:
Download a copy of the polyfill.js file onto your web app folder (maybe from here by extracting resources/app/node_modules/safe-js/dist/polyfill.js from the safe-browser-v0.4.3-7-win-x64.zip or safe-browser-v0.4.3-7-linux-x64.zip file).
Conditionally load the polyfill.js from your app’s index.html file (within the <head>)
<script type="text/javascript">
let url = window.location.href;
console.log("Loading app from: ", url);
if (url.substring(0, 7) !== "safe://") {
console.log("Loading polyfill.js");
let head = document.getElementsByTagName("head")[0];
let script = document.createElement("script");
script.src = "./polyfill.js";
script.type = "text/javascript";
head.appendChild(script)
}
< /script>
Place your code which calls the safe-js functions, e.g. window.safeAuth.authorise(app).
Run the SAFE Launcher.
Open the SAFE Browser, and select from the menu: “BeakerDev” -> “Toggle WebSecurity for new tabs”
For me just including safe-js polyfill in your index.html means everything works as long as the safe launcher is running you don’t even need to start a local webserver you can just access it as a file.
Here is a link to the WhiteOutMashups’ safe demo website with the polyfill, try access the index as a file rather that starting a webserver. https://drive.google.com/open?id=0B5yEgXGejLibX1JRWEFVYlozUkE
Note that in step 2 you can just load the polyfill.js if you are only working locally and remove it before uploading it onto SAFE net.
I think it is best to include the polyfill.js without the condition because it is bad security practice, and may not work in any case once deployed because it probably violates CORS rules in SAFE Browser (inline scripting).
It isn’t a disaster to forget to remove it when you deploy, just a minor bug which users should not notice. Still a pain though
So if it could be injected as part of a SAFE Browser debug setting, as @WhiteOutMashups suggested, that would be a pretty slick solution. We await @joshuef!
Not trying to disagree with all you said but just being curious here, why that script could violate CORS?
BTW, I tried on the SAFE browser and it works just fine, i.e. it doesn’t load the polyfill.js and I don’t see any errors.
You won’t see errors if you have web security disabled. You might if not, because inline scripting is one of the things CORS is used to block (though all settings are optional, so it depends how it is configured).
No indeed, you’re right - I was thinking about it and just came back to add that
I’d forgotten that those checks no longer happen (originally they were in the proxy which has been removed).
So it would only be a real problem if they were reintroduced, say by using another browser with a plugin perhaps (because as web security standards are improving, all other browsers are gradually tightening up their defaults on this). But with SAFE Browser it’s rather a matter of coding practice, and just in case it becomes an issue in future.
It could be. I’m not sure firing that into local development will always make sense. It’s a small step to include the polyfill in your dev setup for localhost and you have the advantage of some control over the version etc.
But yeh, if there’s a real need to have polyfill added to localhost urls, it should be doable.
The safe launcher was able to get all requests made if CORS was disabled in a browser and a polyfill safe js referenced in the html file, this made it possible to develop a website in the chrome browser, would it be possible for the beaker-plugin-safe-app javascript to be referenced like a polyfill with it sending the requests to the safe browser from any browser on your computer as long as it had CORS disabled. This could make it possible to test on different types of devices.
yes but it is possible to forward those requests back to the computer and for the computer to give back the data to the browser, it’s a bit ‘hacky’ but most of my development of the old safe demo was done on chrome with the requests going to the safe launcher
