Security in iframe / javascript built-in widgets

Question

I am creating a website functionally similar to Google Analytics. I am not involved in analytics, but I am trying to provide either one javascript line or one iframe line, which will add functionality to other sites.

In particular, the embedded content will be a button that opens a new window and allows the user to perform some actions. In the end, the user will finish, and the window will close, and at that moment the button will be updated to a new element, indicating that the user has completed the stream.

A popup will download content from my site, but my question is about the javascript (or iframe) inline string. What is the best way to do this? Google Analytics and optimistically use javascript to change the homepage. Obviously, iFrame will work too.

I have a security problem: someone copies the embed code from one site and puts it in another. Each page / site combination that implements my script / iframe will have a unique identifier, which the site developers will generate from an authenticated account on my site. Then I provide them with the appropriate embed code.

My first thought was to simply use an iframe that loads the page from my site with url parameters specific to the page / site compilation. If I go along this route, is it possible to determine that the page only loads from an iframe embedded in a specific domain or url prefix? Could something like this be done using javascript?

I read this post , which was very useful, but my use case is a little different, since I'm actually going to open the content to users with whom I can interact. The competition is that the enemy of the site where my insertion is hosted is deceivingly tempting its users to use the widget. These users will believe that they interact with my site on behalf of an enemy site, but actually interact on behalf of a friendly site.

Answer 1

If you want to keep it as a simple client-side widget, the simple answer is that you cannot do it exactly as you describe.

Two solutions that come to mind for this are as follows: the first one is a compromise, but simple, and the second is more active (both for you and for users of your widget).

Referer Check

You can check the referate HTTP header to make sure that the domain matches what is expected for a particular site identifier, but keep in mind that not all browsers will send this (and most will not if the referring page is HTTPS), and that some browser privacy plugins can be configured to hold it, in which case your widget will not work, or you will need an additional, awkward user interface step.

• The website www.foo.com embeds your widget using the built-in script <script src="//example.com/widget.js?siteId=1234&pageId=456"></script>
• Your widget uses server-side code to generate the .js file dynamically (for example, the request for the .js file may follow the rewrite rule on your server for matching with PHP / ASPX).
• The server code checks the HTTP referer header to ensure that it matches the expected value in your database.
• According to the widgets performed as usual.
• In case of non-compliance or if the referent is empty / absent, the widget will still be executed, but an additional step will be added that will ask the user to confirm that they have accessed the widget from www.foo.com
• For confirmation to be safe from clickjacking , you must open the confirmation step in a pop-up window .

Server check

Perhaps you are a little designed for your purposes and risk becoming too complex for customers who want to implement your widget - you decide.

• The website www.foo.com wants to embed your widget for the current page request that it receives from the user.
• The server www.foo.com makes an API request (passing the secret key) to the API you are using, requesting a one-time key for page ID 456.
• Your API checks the secret key, generates a secure one-time key, and passes the value while writing the request to the database.
• www.foo.com introduces a script as follows <script src="//example.com/widget.js?siteId=1234&oneTimeKey=231231232132197"></script>
• Your widget uses server-side code to generate the js file dynamically (for example, .js can follow the rewrite rule on your server for matching with PHP / ASPX).
• Server-side code checks the combination of oneTimeKey and siteId to verify that it is valid, and if so it generates the widget code and deletes the database entry.
• If the user reloads the page, the above steps will be repeated and a new one time key will be created. This will protect against evil.com from a page scraping code and paste options.

Answer 2

The answer here is very thorough and contains a lot of great information and ideas. I solved this problem by approving the X-Frame-Options headers on the server side, although support for them is not complete in browsers and may have been tampered with.