And @joshuef , having just gone through this I have 2 questions:
can the polyfill.js file be somehow embedded into the Browser so new app devs won’t have to grab a compiled copy and place it into their localhost app files?
is there a way we can get this dev option of “Toggle WebSecurity for New Tabs” into the production release builds? I can definitely see that this may lower security, so NO is a totally acceptable answer, but I was thinking maybe it could be put deep in the “Advanced Options” somewhere or something, so people would only need one build of the browser, and would remove many of the steps I just did.
Either of these would make it easier for new people to make SAFE Web Apps in the future
You can place this in your code to conditionally use the polyfill.js only in dev mode, when you run the app from the SAFEnet it uses the functions embedded in the browser:
if (process.env.NODE_ENV !== ‘production’) {
require(‘safe-js/dist/polyfill’)
}
The steps I follow at the moment (they may become obsolete when the new Authenticator and safe_client_libs get released) to create a SAFE web app are the following:
Install nodejs and create the skeleton of the app with create-react-app
Add safe-js module to the app: npm install safe-js --save
Place the following code in your app:
if (process.env.NODE_ENV !== 'production') {
require('safe-js/dist/polyfill')
}
Place your code which calls the safe-js functions, e.g. window.safeAuth.authorise(app).
Run the SAFE Launcher.
Run your app: npm start
Open the SAFE Browser, and select from the menu: “BeakerDev” -> “Toggle WebSecurity for new tabs”
Open a new tab on the browser, and go to your web app’s URL, e.g. http://localhost:3000
You might need to manually patch the polyfill.js located at node_modules/safe-js/dist/polyfill.js if you invoke window.safeStructuredData.readData (see issue 21)
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.
