We Keep Coding

How to lock page/content with javascript and html

I'm looking to securely lock content on a basic html site based on various permissions of the user. I'm looking to have a pop-up modal appear when the user's permissions don't check out... however it seems to be that any savvy user could simply open the console and delete that element (thus revealing the page anyways).
What am I missing here? What's the best way to approach this so that no matter what the actual page can't be accessed?
Thanks in advance for the help!

If content is downloaded to the client, it's always technically possible for a savvy user to access it.
You can either live with that, or alternatively do something like the following:
Load the basic page template without any content
Use an API call using cookies/other auth to get the content
If logged in, display the content, if not, launch the modal.

Ok here is my answer to this one.
The answer given was agood one, you can't hide the content truly so your options are:
Don't download all the stuff you want until you have auth'd the user (via cookies etc.
Use a simple redirect/buffer page infront of your hidden content.
In my use case (shopify) partial downloading of store content isn't exactly configurable (or i don't have enough knowledge of their template language + theme design to pull it off!), so I made use of javascript and cookies in order to check a user's status. If the user didn't pass they'd get kicked back to a landing page. Good enough!

Javascript - get click another site page link?

I want to know if my website user click in a link in another website so I can show him a thank you message.
I want to get this click in another website link. Is it possible? How can I do something like this?
Thank you

Your question doesn't state whether you control the link you are trying to monitor, or if you are trying to monitor a link controlled by a third-party website. I'm going to assume the later, but if you control the link, then see the first comment to your answer.
The short version is that there is no way to independently monitor a user's action on another website from within your own. To allow this would violate some of the fundamental tenants that networking and the Internet are based on. For example, if I host the website www.reallyCoolRocksToBuy.com and I want to know whether or not you just purchased a really cool rock on Amazon after viewing it on my site, there is no way to directly get this data even though both my website and Amazon's are open in your browser at the same time.
The highest level object you can access via Java or HTML normally (there are always some exceptions) is the Window object of your own page. There used to be a way to have some control over a third-party page that was launched in a window that you spawned, but this is no longer possible, and even it it was, you still wouldn't be able to monitor any links from that site.
The only way to achieve what you want is for the third-party site to be involved in the communication. Many sites have APIs for sending and receiving referral or link information. For example, Amazon has an API that you can use when someone clicks on an Amazon link from your site. There are a number of ways this is achieved, but basically your link sends a specially encoded string to Amazon identifying your site as the referrer. Amazon can this use this string to create and share session information from the visitor. Depending on what your relationship was with Amazon, you might be able to use this session information to find out if your user purchased a pretty rock from Amazon, but it would be entirely up to Amazon to share this information.
Cookies and other local data can also be used to achieve similar results, but again, you have to have the cooperation of the site.

Getting page location in ColdFusion

When I am using iframes or frames (older sites), as a extra security precaution I use the JavaScript function:
<SCRIPT LANGUAGE="JavaScript1.1">
if (top == self) self.location.href = "../index.cfm";
</SCRIPT>
then another hidden check to see if the page is being called correctly....
<cfif (HTTP_REFERER DOES NOT CONTAIN "referer_page.cfm")
<cfabort>
</cfif>
It works great to keep visitors (hackers?) from opening and/or trying to post to the page.
The problem is that the JavaScript displays in source code and the less they know...
I know the JS is client side but is there anyway to create the function in the server side CF or otherwise hide from prying eyes?
I a running cf9 on my and most of my client sites.
Thank in advance

No, it is not possible for any server side language to tell if the client that requested a page intends on displaying it inside of a frame. The only way to tell that is to ask the browser once your page reaches it.
What's the concern with the Javascript being visible?

There is literally nothing you can do to permanently avoid clients from seeing your source HTML and/or Javascript. Any attempt at security on the client side is in the end futile. You will keep out casual (i.e. non-web developer or programmer) users, but that is all. Anyone with a rudimentary knowledge of HTML and access to Google (or Alta Vista or ask jeeves for that matter) will be able to circumvent your barriers.
The use of HTTP_REFERER is suspect here as well (I know I know... I'm a negative Nellie :). That CGI var is dependent on the browser and web server working together. It will not be reliable overall because it is dependent on the client side. Someone up to no good will have no problem circumventing your barrier by simply constructing requests with the appropriate referrer.
If you want server side security then you are forced to use some form of authentication and session. This is a growing field what with oAuth and the use of Google, FB, Twitter etc as federated authenticaiton services. But plain old usernames and passwords tied to login sessions works too :)

To be clear, #Luke is saying that some users properly using your site, viewing iframe content, may have problems if they have a security setting, like an anonymity program, blocking their data, like cgi variables.
The only real solution is proper authentication and filtering on every page. If a list shows content for a user and loads details into an iframe, the iframe's page must also check that the user has access. At that point, it doesn't matter if they can get at the url.
For instance, if you get a list of user images like this.
<cfquery name="getImageList">
select imageid,imagefilename_mini
from images
where userid = <cfqueryparam value="#session.userid#">
</cfquery>
Which loads an iframe to load full sized images, you still need the and subclause
<cfquery name="getThisImage">
select imagefilename from images
where imageID = ...
and userID = ...
</cfquery>
That way, even if someone changes the image id in the url, it still only lets them see content bound to the userID.
Also, modern browsers make altering the source of a live page all too easy. I don't mean that browsers can alter the server side file, I mean that contents of the DOM as delivered to the browser. It's an incredibly useful tool for developing and debugging, but it does make mischievous/malevolent activity easier.
In chrome and firefox, you can inspect an element, change the attributes and the page will change before your eyes. Here, that works for iframe src's, so it still is within the DOM it expects to be in.
You should regard client side UI as how you'd like the page to be presented, and the way it works best but use server side safeguarding (proper validation) because it's too easy to get around client-controlled data/elements.

Is it possible to collect data from one page and autofill it onto a form on a different site using JS/jQuery?

A site I am working on requires user information to be collected from a form when the user presses the submit button. The site will then take the information and plug it into a more robust form on a different page, so the user does not have to retype the information twice.
Is this possible using javascript?
Any help appreciated.

Once the user leaves the current page, the JavaScript on the original page is no longer running, They will load up the other page and run that page's JavaScript.
Do you have ownership of both pages?
If so, then you can leverage the form GET to pass information across pages, so the next page will have a Query string, and JavaScript can parse that.
Another way to move data from one page to another is to use Cookies. So it really depends on how much data you want to move around.
But I highly recommend that you leverage the server-side technology to handle the form GET or POST and carry information across pages.

This completely depends on the OTHER site. You can have a form with the same field names and post it to the same URL the other site's form uses.
BUT - if that site checks to see where the original post came from, it may block you out.

Can javascript content be shared between two pages?

I'm trying to make a sort of map with data that overlays based on what a user selects. Currently, I just have the image on the same page shrunken, but it's rather hard to read. I was thinking I could have the entire image in an iframe and just have the user be able to scroll around the map, but Im not sure if I can use the javascript between the two pages. Would it be possible or do I have to figure out another way to get a full size image?
http://xicorp.webs.com/airlinemap.html

If the two pages are on the same domain, then you will be able to transfer information between them. If not, there are still ways to transfer JSON data between domains (using JSONP) but it will be much harder.

Yes you can. In fact, you can call functions in one javascript file that only exist in another (provided you add them in the right order).
If you aren't in the same domain, you can use JSONP to freely send cross-domain requests back and forth.
jsonp with jquery