Use the postMessage mechanism to set the iFrame's height.

Remove `allow-same-origin` from the iframe's sandbox.

Author: linjunpop

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## master
 
 - Fixes the link in the gist view will be opened in the iFrame.
+- Use the `postMessage` mechanism to set the iFrame's height, which should be much secure.
 
 ## 0.6.0
 

main.ts

@@ -1,4 +1,5 @@
 import { Plugin } from 'obsidian';
+import { nanoid } from 'nanoid';
 
 type GistJSON = {
  description: string,
@@ -10,8 +11,13 @@ type GistJSON = {
  stylesheet: string
 }
 
+const pluginName = "obsidian-gist"
+const obsidianAppOrigin = 'app://obsidian.md'
+
 export default class GistPlugin extends Plugin {
  async onload() {
+ this._injectContainerHeightAdjustmentScript()
+
  this.registerMarkdownCodeBlockProcessor("gist", async (sourceString: string, el, ctx) => {
  const gists = sourceString.trim().split("\n")
 
@@ -23,21 +29,20 @@ export default class GistPlugin extends Plugin {
  });
  }
 
- onunload() {
- }
-
  // private
 
- async _processGist(el: HTMLElement, gist: string) {
+ async _processGist(el: HTMLElement, gistString: string) {
  const pattern = /(?<protocol>https?:\/\/)?(?<host>gist\.github\.com\/)?((?<username>\w+)\/)?(?<gistID>\w+)(\#(?<filename>.+))?/
 
- const matchResult = gist.match(pattern).groups
+ const matchResult = gistString.match(pattern).groups
 
- if (matchResult.gistID === undefined) {
- return this._showError(el, gist)
+ const gistID = matchResult.gistID
+
+ if (gistID === undefined) {
+ return this._showError(el, gistString, `Could not found a valid Gist ID, please make sure your content and format is correct.`)
  }
 
- let gistURL = `https://gist.github.com/${matchResult.gistID}.json`
+ let gistURL = `https://gist.github.com/${gistID}.json`
 
  if (matchResult.filename !== undefined) {
  gistURL = `${gistURL}?file=${matchResult.filename}`
@@ -47,22 +52,29 @@ export default class GistPlugin extends Plugin {
  const response = await fetch(gistURL)
 
  if (response.ok) {
- const gistJSON = await response.json()
- return this._insertGistElement(el, gistJSON as GistJSON)
+ const gistJSON = await response.json() as GistJSON
+ return this._insertGistElement(el, gistID, gistJSON)
  } else {
- return this._showError(el, gist)
+ return this._showError(el, gistString, `Could not fetch the Gist info from GitHub server. (Code: ${response.status})`)
  }
  } catch (error) {
- return this._showError(el, gist)
+ return this._showError(el, gistString, `Could not fetch the Gist from GitHub server. (Error: ${error})`)
  }
  }
 
- async _insertGistElement(el: HTMLElement, gistJSON: GistJSON) {
+ async _insertGistElement(el: HTMLElement, gistID: string, gistJSON: GistJSON) {
+ // generate an uuid for each gist element
+ const gistUUID = `${pluginName}-${gistID}-${nanoid()}`
+
  // container
  const container = document.createElement('iframe');
+ container.id = gistUUID
+ container.classList.add(`${pluginName}-container`)
+ container.setAttribute('sandbox', 'allow-scripts allow-top-navigation-by-user-activation')
+ container.setAttribute('loading', 'lazy')
 
- // auto adjust container height
- const innerStyle = `
+ // reset the default things on HTML
+ const resetStylesheet = `
  <style>
  html, body {
  margin: 0;
@@ -72,36 +84,92 @@ export default class GistPlugin extends Plugin {
  </style>
  `
 
+ // height adjustment script
+ const heightAdjustmentScript = `
+ <script>
+ deliverHeightMessage = () => {
+ const contentHeight = document.body.scrollHeight;
+
+ top.postMessage({
+ sender: '${pluginName}',
+ gistUUID: '${gistUUID}',
+ contentHeight: contentHeight
+ }, '${obsidianAppOrigin}');
+ }
+
+ window.addEventListener('load', () => {
+ deliverHeightMessage();
+ })
+ </script>
+ `
+
  // build stylesheet link
  const stylesheetLink = document.createElement('link');
  stylesheetLink.rel = "stylesheet";
  stylesheetLink.href = gistJSON.stylesheet
 
- // build link hacker
+ // hack to make links open in the parent 
  const parentLinkHack = document.createElement('base')
  parentLinkHack.target = "_parent"
 
  // Inject content into the iframe
  container.srcdoc = `
- <head>
- ${stylesheetLink.outerHTML}
- ${parentLinkHack.outerHTML}
-
- ${innerStyle}
- </head>
-
  <html>
- ${gistJSON.div}
+ <head>
+ <!-- hack -->
+ ${resetStylesheet}
+ ${parentLinkHack.outerHTML}
+ ${heightAdjustmentScript}
+
+ <!-- gist style -->
+ ${stylesheetLink.outerHTML}
+ </head>
+
+ <body>
+ ${gistJSON.div}
+ </body>
  </html>
  `
- container.setAttribute('sandbox', 'allow-same-origin allow-top-navigation-by-user-activation')
- container.setAttribute('onload', 'this.height=this.contentDocument.body.scrollHeight;')
 
- // insert into the DOM
+ // insert container into the DOM
  el.appendChild(container)
  }
 
- async _showError(el: HTMLElement, gistIDAndFilename: String) {
- el.createEl('pre', { text: `Failed to load the Gist (${gistIDAndFilename}).` })
+ async _showError(el: HTMLElement, gistIDAndFilename: String, errorMessage: String = '') {
+ const errorText = `
+Failed to load the Gist (${gistIDAndFilename}).
+
+Error:
+
+ ${errorMessage}
+ `.trim()
+
+ el.createEl('pre', { text: errorText })
+ }
+
+ _injectContainerHeightAdjustmentScript() {
+ const containerHeightAdjustmentScript = document.createElement('script')
+ containerHeightAdjustmentScript.id = `${pluginName}-container-height-adjustment`
+ containerHeightAdjustmentScript.textContent = `
+ window.addEventListener("message", (messageEvent) => {
+ const sender = messageEvent.data.sender
+
+ if (messageEvent.origin !== 'null') {
+ // a message received from the iFrame with \`srcdoc\` attribute, the \`origin\` will be \`null\`.
+ return;
+ }
+
+ // only process message coming from this plugin
+ if (sender === '${pluginName}') {
+ const gistUUID = messageEvent.data.gistUUID
+ const contentHeight = messageEvent.data.contentHeight
+
+ const gistContainer = document.querySelector('iframe#' + gistUUID)
+ gistContainer.height = contentHeight
+ }
+ }, false)
+ `
+
+ document.head.appendChild(containerHeightAdjustmentScript)
  }
 }

package.json

@@ -21,5 +21,8 @@
  "rollup": "^2.32.1",
  "tslib": "^2.2.0",
  "typescript": "^4.2.4"
+ },
+ "dependencies": {
+ "nanoid": "^3.1.23"
  }
-}
+}