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.
Related
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.
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 am using WSS 3.0 in my application. I am displaying a List as a DataView Webpart. My objective here is to make this webpart visible to a selected group of individuals. As there is no option for Target Audience in WSS 3.0, I went to edit Permissions for List and gave Read permissions only to selected users. This doesn't hide the web part from the page, rather shows an Access Denied message to other users.
Access denied. You do not have permission to perform this action or access this resource.
As I said, I want to hide this webpart, as in make it invisible on the web page from other users who do not have permissions to view it. As this message will be displayed only to those users who do not have permissions!, my approach is to search for the above message in the html and identify and hide the parentnode, thereby hiding the webpart.
I am not quite sure how to do this. Any ideas? Thanks in advance!
I'm going to assume you're in a situation where you can add additional web parts to the page and not trying to add JavaScript to the DataView Web Part directly. My suggestion won't work on a separate page if a Designer adds another view of this list.
Upload a blank .js file to your Site Assets. Add a Content Editor Web Part to your page, point it at that file. Add JQuery from a provider or host it yourself, adding the reference in your file. From there, you have 3 directions in which to work: first, explore the web part with Internet Explorer's F12 Developer Tools, keeping a particular eye on divs and tables with good unique ids, names, or classes that would solve your problem if hidden. Also keep an eye on the id of the div or table or cell or whatever that contains your access denied text. Second, (assuming you're new to JQuery) do some JQuery tutorials and then start playing with selecting the above items and, say, changing their background color. Once you have both of those, you're 90% there: (try to) select the object that would contain the access denied text, and if the innerHTML is present and equals that string, then set display:none for the div or tables to hide your web part. The third tool you have is editing the page directly with SharePoint Designer: you can toss a div with an id of your choosing around any xsl:template, which might help in your JQuery selecting.
I'm sorry I can't give you the specific code, since I'm not in a position to test it. If that changes, I'll try and give a more detailed response.
Old, misdirected answer: Do either of the answers here work for you? Alternatively, this answer has some great resources to solve your problem. Just change the message to an empty string.
Thanks Aron :D
I found the id for the webpart and hard coded it. It provided the solution, but I was hoping to programmatically fetch the id instead by searching the innerhtml, as I have more than one web parts that have to be hidden.
I found a partial solution here:
Hide SharePoint web part using javascript onclick method
I put a CEWP on the page and added the following script in it:
<script>
function hide()
{
var content = document.getElementById("webpartID").innerHTML;
var n = content.search("Access denied. You do not have permission to perform this action or access this resource");
if(n!=-1)
{ document.getElementById("webpartID").style.display="none";
}
}
_spbodyonloadfunctionnames.push("hide");
</script>
In my case, I picked up the webpart id from the aspx page or view source for the page.
Let's say I have a <textarea> and <div> element, and when the user puts html, CSS, or whatever they want), into the textarea, then their input is set as the innerHTML of the <div> element, using javascript.
What are the vulnerabilities of letting the user define the content of a <div> element?
If the content they enter does not leave the page, there is no more risk than them editing the DOM through firebug or the chrome inspector. If you take their input and then display it as is, that is a huge security risk especially when other users are on your website.
Well if you encode the contents so that any javascript that is in there won't execute then it should be safe.
If you don't then a user could upload javascript that would execute the next time another user views that page.
I want to modify my response to take into account #Brigham comments. Escape only works reliably if you are dealing with the the innerHTML of something like a div tab, if you are dealing with using a user generated value as a attribute or within a script tag then escaping/encoding won't work.
I'll refer you to the OWASP XSS guidance (that #Brigham originally brought to my attention) for more information: https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#Untrusted_Data
The user can do cross-site scripting. It can inject malicious client-side code
Take a look at http://en.wikipedia.org/wiki/Cross-site_scripting
Whatever they want could include a <script> tag which pulls a .js file from their own server. Then if you show that content to another user, the script could do all kinds of things to extract information from the unsuspecting user.
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.