iframes, X-Frame-Options, and TiddlyWiki clients

[j...@codemac.net]

Hi!

tl;dr - including iframes from any well configured server leads to them not working. Any workarounds with chrome / firefox / TiddlyDesktop?

TiddlyWiki is amazing, and I've been thinking about setting it up to reflect my current org-mode workflow to see if it could either replace it, or become a better storage place for my larger notes & research.

One use case I was very excited about was creating one tiddler for each external ticket I had at work with iframes. Then I would add my personal notes & work within the tiddler, and at the top I would have an iframe of the ticket's webpage so I could submit updates or read updates from others.

However, these iframes get blocked by chrome / chromium / firefox attempting to help protect me from click jacking via X-Frame-Options: deny or sameorigin. So nothing is displayed :(

I have yet to figure out how to get a browser to ignore these settings for tiddlywiki, localhost, or anything really. Wondering if anyone else has had this issue.

Thanks!

  //  codemac

[j...@codemac.net]

Ok! I figured out what was going on.

My domain administrator actually disabled certain Chrome extensions from being able to be used. So the extensions would normally work, but they won't work on Chrome when I'm signed into my work account.

For future readers, here is the chrome extension code that worked for me. But warning - this disables a very large security feature of chrome for clickjacking, so be careful! You may want to update "all_urls". I haven't figured out how to get this to apply to *just* tiddlywiki files.

Create a folder named my_frame_extension.

Create a file in my_frame_extension named background.js with the following:

chrome.webRequest.onHeadersReceived.addListener(
    function (details) {
      return {
    responseHeaders: details.responseHeaders.filter(function(header) {
          return (header.name.toLowerCase() !== 'x-frame-options'
          && header.name.toLowerCase() !== 'content-security-policy');
    })
      };
    }, {
      urls: ["<all_urls>"]
    }, ["blocking", "responseHeaders"]);

Then create a manifest.json in the same folder like so:

{
  "background": {
    "scripts": [ "background.js" ]
  },
  "description": "Personal iframe tiddlywiki extension.",
  "manifest_version": 1,
  "name": "Fix iFrames For TiddlyWiki",
  "permissions": [ "webRequest", "webRequestBlocking", "<all_urls>" ],
  "update_url": "http://clients2.google.com/service/update2/crx",
  "version": "1.0"
}

 Then go into your extensions, and click "load unpacked extension", and choose the folder you created.

Voila! Now external iframes will work very easily in your tiddlers.

  //  codemac

[BJ]

Interesting, the api says you can add tab id and window id to the filter option, so you could watch for load and unloading of tws and add a listerner for each tab /window that contains a tiddlywiki...

BJ