It seems that the only way to protect our content is to check the URL of the page on which our javascript is hosted matches the signed site.
Ah, but in client or server code?
They both have their drawbacks. Doing this using server-side code is unreliable because some browsers will not pass the Referer header at all, and if you want to stop caches storing a copy of the script, preventing Referer-check checking, you must serve nocache or Vary: Referer headers, which may hurt performance.
On the other hand, when you return to the client side in a script, you cannot be sure that your environment in which you work was not sabotaged. For example, if your script tag was as follows:
<script src="http://include.example.com/includescript?myid=123"></script>
and your server side of the script looked at 123 as an identifier for a client using the customersite.foo domain, it could respond with the script:
if (location.host.slice(-16)==='customersite.foo') { // main body of script } else { alert('Sorry, this site is not licensed to include content from example.com'); }
Which seems simple enough, except that the included site could replace String.prototype.slice with a function that customersite.foo always returned. Or other functions used in the body of the script may be suspicious.
Inclusion of <script> from another security context allows both ways: the included site must trust the source site so that it does nothing wrong with its security context, for example, stealing end-user passwords or replacing the page with a large braid; but equally, the source code is only a guest in the context of a potentially malicious context with the site turned on. Thus, between the two parties there is a confidence measure where one site includes a script from the other; domain verification will never be a 100% reliable security mechanism.
I would like to include a stylesheet, if possible, to style the element, but I'm not sure if I can load it along with javascript.
You can, of course, add style elements to the title element of the document, but you need a solid namespace so that it does not interfere with other page styles. You can use inline styles for simplicity and avoid specific clutter from the main page style sheet.
It depends on whether you want the generated content to be part of the main page (in this case, you might prefer the included site to deal with what styles they wanted for it themselves), or you want it to stand alone not affected by the context (in this case, you probably would be better off putting your content in an <iframe> with your own styles).
I am thinking about using jquery, so the included file will call jquery first
I would try not to pull jQuery to the main page. Even with noconflict there are ways in which it can conflict with other scripts that do not expect its presence, especially complex scripts like other frameworks. Running two frameworks on the same page is a recipe for strange bugs.
(If you took the <iframe> route, on the other hand, you have your own scripting context for the game, so this is not a problem.)