I know the title might make you confuse.
I have a ParentComponent called ChildComponent.
ChildComponent using eval to do some stuff. And the worst thing is, the eval's value can pass by users.
Maybe users will input some bad thing for the whole application, so I'm trying to prevent it.
The first solution that comes to my head is loading ChildComponent into an iframe (like a code-sandbox), so it can protect my Application (anything eval just affect the iframe).
But it has some problems: styles couldn't load correctly.
I asked about that problem but got no answer How to load completely an Angular component into an iframe?
I'm stuck, any idea for my problem is really appreciate
First, an iframe doesn't prevent anything.
You can just call window.parent to get a reference to the parent window.
Second, this looks like an XY problem : do not ask for help on what YOU think is the best solution, but rather explain the goal you are trying to achieve.
Finally, know that eval will NEVER be safe, so you should use it at your own risk.
But then again, JS as a whole is not safe, you can just open the dev tools and hack into any website.
Related
I am currently working on a HTML presentation, that works well, but I need the presentation to be followed simultaneously with a NAO robot who reads a special html tag. I somehow need to let him know, which slide I am on, so that he can choose the correct tag.
I use Beautiful Soup for scraping the HTML, but it does so from a file and not from a browser. The problem is, there is javascript running behind, assigning various classes to specific slides, that tell the current state of the presentation. And I need to be able to access those, but in the default state of the presentation they are not present and are added asynchronously throughout the process of the presentation.
Hopefully, my request is clear.
Thank you for your time
http://www.seleniumhq.org/ (probably webdriver) is your friend. Initialize a browser and call browser.html to get the document in the current state.
There's wget on the robot, you could use it... (though I'm not sure I understand where is really the problem...)
I am a backend developer, I write javascript only when needed and in not the best ways. But I wanted to redeem myself and star writing organized and following best practices as much as I could.
So I started a module pattern to encapsulate some functions and bind UI events from my markup, becuase this was pretty much try and error, I used jsbin following the suggestion of a friend who is a front end developer.
The thing is, that my concept works on jsbin, but then I moved that to my js file in the server and there it seems I loose scope of the jQuery objects that I cache inside my module pattern.
http://jsbin.com/ciwomeve/7/edit
The functionality is pretty basic I populate the options of two select elements (this works) then I bind the on change events for those selects, and when triggered I should call some functions that eventually should do an ajax request to my backend and obtain data.
Can you guys please advise me on the code, and tell me what I am doing wrong please?
There's not much to go on here, but I'm fairly certain that your issue is that your script tag is in <head>, and it's running before your content is loaded. If this is the case, it will be trying to access elements in the DOM that don't yet exist (e.g. when this line runs, $hostSelect1: $('#host-select-1') the select element with id host-select-1 won't exist yet, but jQuery will look for it anyway and fail silently).
You can move your script to the bottom of the page, right before </body>, in which case you can be certain that all of your content will be loaded when your script runs. This method also has some other performance benefits. Or else you can wrap your call to DbDiff.init() in $().ready, like this $().ready(function(){DbDiff.init()});, which will have largely the same effect (except that settings has already been evaluated... you would need to do a little restructuring in order to make sure $('#host-select-1'), etc. are evaluated and assigned to $hostSelect1 only after your DOM content has loaded).
I know this question might trigger some reactions of the type "View-model separation is good". So please be aware that I am aware of that :).
So, when activating a route, Durandal obtains a view by doing a very simple get request, just using something like "view.html" in the get url.
Question: is it supported to add a parameter to the url? So as to have: "view.html?id=4".
I know it's not the point but I want to do it anyway. Why? Because currently, an important part of the js code happens in the viewAttached method. I am using a js library for adding stuff to the page, that needs access to the dom. So when reaching the page, one can see modifications taking place, and it's not nice to see the page changing like that. So I'd prefer that stuff to happen on the server, using a .Net control.
Thanks,
Nicolas
I think that you can find all the information that you need in this other question: Pass data in DurandalJS to other view
When I use google maps, I am interested in its implemention, so I use the firebug to inspect.
Then I found that its javascript loading strategy is rather interesting. Take this page for example:
The overlay example
Then when I open this page first time, the following js are loaded:
https://maps.googleapis.com/maps/api/js?sensor=false
https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js
https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/13b/%7Bcommon,map,util,poly%7D.js
https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/13b/%7Bonion,geometry%7D.js
But if I refresh the page(use the ctrl+f5), the following js are loaded:
https://maps.googleapis.com/maps/api/js?sensor=false
https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13b/main.js
However the page still works, the overlay is drawn in the map. But where is the poly.js and etc?
Also, can anyone tell me how to load the js by components? For exmaple the common util poly in the example.
What should I know when I write the different components?
1. When poly.js loads, it passes a string to google.maps.__gjsload___.
Here's an excerpt:
google.maps.__gjsload__('common', '\'use strict\';var Ai=isNa...
The rest of the file is just the contents of that string.
My hunch is this function probably stores this string in localStorage or sessionStorage so that it only has to be retrieved once.
2. Also, if you want to learn about loading js files as-needed, look into AMD and/or CommonJS:Modules.
A good imlementation of AMD (my preference) is RequireJS.
Update
I did some poking around, and localStorage and sessionStorage do not appear to be being used on this page. I also can't duplicate your results. In Firebug, poly.js always loads for me. There may be some magic happening somewhere, but I don't see it.
However, it's entirely possible to store a string in localStorage and sessionStorage for retrieval without having to make an extra js call.
Also,any one can tell me how to load the js by components?
this touches on the topic of asynchronous javascript file loading. if you've ever used a language that has a way to "include" a file at any point in a script, you'll understand that javascript does not have this capability. because of that, there is this whole paradigm of "aysnc javascript addition" via script tag injection.
script tag injection: you dynamically make a script tag, and set its source to the file you need, and insert that tag into the DOM, and voila, a new file has been loaded and executed. With javascript heavy applications, this is common, especially when loading third party applications. Google does it alllll the time, just check out google analytics' include script for a good example of this.
Now, since this is a touchy and delicate type of coding to do, some "javascript component / module / asset loading" frameworks have refined it and made it pretty stable. common.js, require.js, etc have all done good jobs at this.
What should I know when I write the different components ?
For what you're doing with google maps, you don't really need to know much. but if you get into javascript module pattern development, you need to know this: make sure you protect your global namespace from being cluttered by your own variables, so encapsulate all of your work in closures when possible, and (recommended but not required) start them all with a ; so they don't break each other if they get loaded out of order.
I've been struggling with a problem for a few hours now, and I would appreciate either some help in accomplishing my goal, or confirmation that what I'm trying to do is in fact impossible.
I have a webapp that takes the selected text (document.getSelection()) as input, from an arbitrary webpage. While it would be possible to use a bookmarklet to do such scripting fairly easily, it's best for the end-user if I can accomplish this with an iframe.
The parent frame is my site with this script:
$('#frame').load(function(){
// this event won't be triggered
$(window).mouseup(function(){
doStuff(window.getSelection());
});
// this will throw a security error
$(window.frames[0].document).mouseup(function(){
doStuff(window.frames[0].document.getSelection());
});
});
An arbitrary site is in the child frame. Unless the child document is from my domain, access is forbidden for XSS security reasons. I've tried several variations and attempted hacks, including setting the iframe src to my domain with the third party URL as an argument, and then redirecting to the third party URL. In a sense, I'm glad that it didn't work (because if it did, then XSS security would still have a long way to go...)
Another option would be downloading the third party page and serving it from my domain like a proxy server, but I've already run into a bunch of problems with relative paths to files, which are sometimes easy to make absolute, but sometimes a fool's errand (such as when the files are accessed via script).
I've concluded that I might just be out of luck. Perhaps an important distinction for my case is that I only want to access the .getSelection() method for the child. No need to be able to access cookies or keystrokes or interact with the DOM. Maybe it doesn't make a difference, but maybe it does.
You could try the proxy method but insert a base tag that points to the original domain. The paths should be taken care of then.
I wouldn't rely on any XSS hacks even if you could find them -- they'd likely be corrected and most likely not crossbrowser.
one possibility is to write your iframe's document with text from an XHR, or use jQuery's load() function, this only works if there is no navigation in the iframe though.
I didn't fully read your answer :-) but maybe I have a solution,
it involves passing data between parent and child frames, both ways.
You can WRITE (and not READ) the hash (hash is the http://url#HASH_PART) of parent from child.
So, on the parent iframe, just set interval to check the value, say every 50ms.
function checkHash() {
if (window.location.hash == "#something") {
// my child frame set this value using:
//parent.window.location.hash = "something";
doSomething();
}
}
For further details, and maybe doing parent to child communications, then
the full article explaining this (also has demo link) can be found here.