I have a text file with some lines containing some key words. My exercise is to extract info from that file and create a html document inserting the liens in the text file with appropriate tags.
for example:
This is the text file:
This should be in a html tag with START as class name
THIS SHOULD BE IN A HTML TAG WITH CAPITALS AS CLASS NAME
This should be in a HTML tag with CODE as class name
Now writing a javascript program to insert those lines into HTML is very easy. I just used some string handling like this:
if(contents[i].indexOf(" CODE")!=-1){
w.document.write("<p class='code'>"+lines+"</p>");
}
I am writing all these into a new window.open object. The main problem is that pop-up blockers do not allow this functionality. So, is there any other way I can do this? I can't generate the html file physically, I need to generate it on the fly, so window.open is the only method I could think of. Are there any other ways I can accompolish this?
(I can bypass the pop up blocker by just using
w=window.open("somefile.html")
w.document.opne("somefile.html")
where somefile.html is any file. But I do not want to do it, it hardly seems a clean way.)
More over, For me to access the file, I have to host it on a server (I am currently using http-server offered by node for this) Is there any other alternative to this?
I do not want to use Jquery, I wish to accomplish all of this with vanilla javascript. But if there is a possibility of doing this with Jquery, please let me know.
Thank you very much :)
On principle, pop-up windows are blocked by all modern browsers. They'll ask you if you want to allow them, but otherwise they'll not allow them.
If it has to be another document, perhaps an iframe could be useful?
Here's a bunch of extra solutions:
Have a fake pop-up. Just a div with all the data which floats above your regular content. You can add an 'x' button to it for closing it and implement some drag-and-drop functionality. The visual effect is much the same, but the user can't treat it as an OS-level window.
Try to somehow integrate the content into the regular page. Either an iframe or just regular content. Modern design has passed the stage of needing pop-ups and other content outside of a single plane. Furthermore, on mobile it's unclear how pop-ups would work.
Open the content in a new tab. This is basically just using an <a> tag. You can put the content you wish to have in the fragment for the link, and the page you open can decode the fragment and show the info you want. Might not work with huge content.
Have a better flow for allowing pop-ups. Inform the user that your site needs pop-ups and make them disable it. One good way is to provide some button which triggers a pop-up, which will be blocked. Then inform them to tell the browser to allow the pop-up since most of them will show something about how the pop-up was blocked. Then you can show your regular pop-up without the risk of the user missing out on the data.
Related
I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)
I'm trying to implement an XSS attack by injecting javascript into a page that runs when a button on the target page is clicked. How can I link the script from my html file to the button on the target page? I'm tried just mimicking the button element on my html page with an onclick attribute but that doesn't work. I tried using an iframe to clickjack but I couldn't get that figured out either. This is for a school assignment so I'm not ACTUALLY hacking a legit website by the way.
XSS is when user input is inserted directly into the DOM without escaping, allowing an attacker to craft a malicious payload that your script will run and inject into the page.
A good example would be a script that reads an error message from a query parameter, and uses .innerHTML to display it on the page.
http://insecure.website.com/example?error=Something+went+wrong
But when used by an attacker like so:
https://www.website.com/example?error=%3Cspan%20class=%22haha%22%3EPWND%3C/span%3E%3Cstyle%3E*{display:none%20!important;}.haha{display:block%20!important;}%3C/style%3E
Would cause a "PWND" message to appear.
This is a school assignment, so I won't give you a complete solution. But this should push you in the right direction.
On my website I want to link to a web-app, automatically inserting some text into a textarea.
Is it possible to link to the website doing something like this?
www.website.com/#document.getElementById('textarea').value ='inserted text';
This bookmarklet is working code, I just want to use a link to the website and somehow get it to run the bookmarklet automatically.
javascript:{document.getElementById('textarea').value = 'inserted text'; void(0)}
Any suggestions/ideas?
On my website I want to link to a web-app, automatically inserting some text into a textarea.
You cannot, unless that web-app provides a means for you to do so (for instance, passing information on a query string or otherwise as part of the URL). You can't create a link that runs JavaScript on the page after loading it, not without the page's cooperation.
On the off-chance that the target web-app is also under your control: You could, of course, add a feature to the web-app to do it. If so, be sure you just accept a value and don't allow executing arbitrary JavaScript code passed to you on the URL, that would be a Very Bad Idea unless the target page never shows anything user-specific (and probably even if it doesn't).
I have a HTML Page, in which there are some hidden DIVs and these DIVs are visible vai view source of a page. These DIVs should not be visible to a user when they "view source" of the page.
How this can be done ? Perhaps Javascript or other solution?
You can't really prevent a div from being read, because if you do, there will be no render of it.
It can be encrypted and generated via javascript. But once it is generated, user will be able to see it clearly in computed source.
There is no way of doing what you want. The source (in case of HTML) is just text containing HTML markup. The show source view in the browser shows it to you as it came from the server with added syntax highlighting, but unlike the developer tools, it doesn't reflect any DOM changes done with Javascript. Even if some browser had a feature to prevent some parts of the source from being displayed, users will still be able to open it in another browser or download the HTML as a file and examine the source in a text editor.
JavaScript will only change the "computed source" so the client will still be able to see them. In order to really remove them you'll need to remove them server side.
You can not really hide the source code but you can encrypt it. What you transmit from Server to the Client will be in the client side browser and can be seen somehow.
With a tool like the one I just googled http://www.iwebtool.com/html_encrypter it is possible to encrypt html.
It will encrypt your html code and you can insert it via javascript later. Encryption will not finally hide it from someone keen in using debugging tools. But a "normal" user won't see it directly in the source.
Still you should be thinking about storing information you want to hide from the user server-side in a session or something.
In Google Reader, you can use a bookmarklet to "note" a page you're visiting. When you press the bookmarklet, a little Google form is displayed on top of the current page. In the form you can enter a description, etc. When you press Submit, the form submits itself without leaving the page, and then the form disappears. All in all, a very smooth experience.
I obviously tried to take a look at how it's done, but the most interesting parts are minified and unreadable. So...
Any ideas on how to implement something like this (on the browser side)? What issues are there? Existing blog posts describing this?
Aupajo has it right. I will, however, point you towards a bookmarklet framework I worked up for our site (www.iminta.com).
The bookmarklet itself reads as follows:
javascript:void((function(){
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());
document.body.appendChild(e)
})())
This just injects a new script into the document that includes this file:
http://www.iminta.com/javascripts/new_bookmarklet.js
It's important to note that the bookmarklet creates an iframe, positions it, and adds events to the document to allow the user to do things like hit escape (to close the window) or to scroll (so it stays visible). It also hides elements that don't play well with z-positioning (flash, for example). Finally, it facilitates communicating across to the javascript that is running within the iframe. In this way, you can have a close button in the iframe that tells the parent document to remove the iframe. This kind of cross-domain stuff is a bit hacky, but it's the only way (I've seen) to do it.
Not for the feint of heart; if you're not good at JavaScript, prepare to struggle.
At it's very basic level it will be using createElement to create the elements to insert into the page and appendChild or insertBefore to insert them into the page.
You can use a simple bookmarklet to add a <script> tag which loads an external JavaScript file that can push the necessary elements to the DOM and present a modal window to the user. The form is submitted via an AJAX request, it's processed server-side, and returns with success or a list of errors the user needs to correct.
So the bookmarklet would look like:
javascript:code-to-add-script-tag-and-init-the-script;
The external script would include:
The ability to add an element to the DOM
The ability to update innerHTML of that element to be the markup you want to display for the user
Handling for the AJAX form processing
The window effect can be achieved with CSS positioning.
As for one complete resource for this specific task, you'd be pretty lucky to find anything. But have a look at the smaller, individual parts and you'll find plenty of resources. Have a look around for information on modal windows, adding elements to the DOM, and AJAX processing.