zenn-markdown-html 0.1.127 → 0.1.128-alpha.0

package/README.md

@@ -32,6 +32,10 @@ const html = markdownToSimpleHtml(markdown);
 
 ## 開発者向けのドキュメント
 
+### サニタイズ方針
+
+[sanitize-html](https://github.com/apostrophecms/sanitize-html)を利用しています。サポートしているマークダウン記法から利用できるHTMLタグと属性を指定してサニタイズしています。網羅しているつもりですが、もし抜け漏れがあったらISSUEで報告してください。
+
 ### Babel の使用について
 
 `zenn-markdown-html` では、PrismJS の言語プラグインを予め全て読み込むために `babel-plugin-prismjs` を使用しているため、ソースコードのビルドには `babel` を使用し、型ファイル(\*.d.ts)のビルドには `tsc` を使用してビルドしています。

package/lib/index.js

@@ -11,27 +11,29 @@ Object.defineProperty(exports, "markdownToSimpleHtml", {
   }
 });
 
-var _markdownIt = _interopRequireDefault(require("markdown-it"));
-
 var _crypto = _interopRequireDefault(require("crypto"));
 
-var _mdContainer = require("./utils/md-container");
+var _markdownIt = _interopRequireDefault(require("markdown-it"));
 
-var _mdRendererFence = require("./utils/md-renderer-fence");
+var _sanitizer = require("./sanitizer");
 
-var _mdLinkAttributes = require("./utils/md-link-attributes");
-
-var _mdLinkifyToCard = require("./utils/md-linkify-to-card");
+var _markdownItImsize = _interopRequireDefault(require("@steelydylan/markdown-it-imsize"));
 
-var _mdKatex = require("./utils/md-katex");
+var _markdownItAnchor = _interopRequireDefault(require("markdown-it-anchor"));
 
 var _mdBr = require("./utils/md-br");
 
+var _mdContainer = require("./utils/md-container");
+
 var _mdCustomBlock = require("./utils/md-custom-block");
 
-var _markdownItImsize = _interopRequireDefault(require("@steelydylan/markdown-it-imsize"));
+var _mdKatex = require("./utils/md-katex");
 
-var _markdownItAnchor = _interopRequireDefault(require("markdown-it-anchor"));
+var _mdLinkAttributes = require("./utils/md-link-attributes");
+
+var _mdLinkifyToCard = require("./utils/md-linkify-to-card");
+
+var _mdRendererFence = require("./utils/md-renderer-fence");
 
 var _markdownToSimpleHtml = require("./markdown-to-simple-html");
 
@@ -65,7 +67,7 @@ md.use(_mdBr.mdBr).use(_mdRendererFence.mdRendererFence).use(_markdownItImsize.d
   tabIndex: false
 }).use(_mdKatex.mdKatex).use(_mdLinkifyToCard.mdLinkifyToCard); // custom footnote
 
-md.renderer.rules.footnote_block_open = () => '<section class="footnotes">\n' + '<div class="footnotes-title">脚注</div>\n' + '<ol class="footnotes-list">\n';
+md.renderer.rules.footnote_block_open = () => '<section class="footnotes">\n' + '<span class="footnotes-title">脚注</span>\n' + '<ol class="footnotes-list">\n';
 
 const markdownToHtml = text => {
   if (!(text && text.length)) return ''; // docIdは複数のコメントが1ページに指定されたときに脚注のリンク先が重複しないように指定する
@@ -75,9 +77,9 @@ const markdownToHtml = text => {
 
   const docId = _crypto.default.randomBytes(2).toString('hex');
 
-  return md.render(text, {
+  return (0, _sanitizer.sanitize)(md.render(text, {
     docId
-  });
+  }));
 };
 
 var _default = markdownToHtml;

package/lib/markdown-to-simple-html.js

@@ -9,6 +9,8 @@ var _markdownIt = _interopRequireDefault(require("markdown-it"));
 
 var _mdLinkAttributes = require("./utils/md-link-attributes");
 
+var _sanitizer = require("./sanitizer");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // preset 'zero' はデフォルトで全ての変換を無効化したプリセットです。
@@ -40,7 +42,7 @@ md.use(_mdLinkAttributes.mdLinkAttributes); // 限られた記法のみをHTML
 
 const markdownToSimpleHtml = text => {
   if (!(text && text.length)) return '';
-  return md.render(text);
+  return (0, _sanitizer.sanitize)(md.render(text));
 };
 
 exports.markdownToSimpleHtml = markdownToSimpleHtml;

package/lib/sanitizer.d.ts

@@ -0,0 +1 @@
+export declare const sanitize: (html: string) => string;

package/lib/sanitizer.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitize = void 0;
+
+var _sanitizeHtml = _interopRequireDefault(require("sanitize-html"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const tags = ['a', 'aside', 'blockquote', 'br', 'circle', 'code', 'details', 'div', 'em', 'embed-katex', 'eq', 'eqn', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'iframe', 'img', 'input', 'li', 'ol', 'p', 'pre', 's', 'section', 'span', 'strong', 'summary', 'sup', 'svg', 'table', 'tbody', 'td', 'text', 'th', 'thead', 'tr', 'ul'];
+const attributes = {
+  a: ['aria-hidden', 'class', 'href', 'id', 'rel', 'style', 'target', 'title'],
+  aside: ['class'],
+  blockquote: [],
+  br: ['style'],
+  circle: ['cx', 'cy', 'fill', 'r'],
+  code: ['class'],
+  details: [],
+  div: ['class'],
+  em: [],
+  'embed-katex': ['display-mode'],
+  eq: ['class'],
+  eqn: [],
+  h1: ['id'],
+  h2: ['id'],
+  h3: ['id'],
+  h4: ['id'],
+  h5: [],
+  h6: [],
+  hr: [],
+  iframe: ['allow', 'allowfullscreen', 'allowtransparency', 'data-content', 'frameborder', 'id', 'loading', 'sandbox', 'scrolling', 'src', 'style', 'width'],
+  img: ['alt', 'class', 'height', 'loading', 'src', 'title', 'width'],
+  input: ['checked', 'class', 'type'],
+  li: ['class', 'id'],
+  ol: ['class', 'start'],
+  p: [],
+  pre: ['class'],
+  s: [],
+  section: ['class'],
+  span: ['class', 'title'],
+  strong: [],
+  summary: [],
+  sup: ['class'],
+  // キャメルケースはすべて小文字に変換でなければ認識してくれないそうなので、念の為両方指定しておく
+  // refs: https://github.com/apostrophecms/sanitize-html/issues/489
+  svg: ['aria-label', 'class', 'role', 'viewBox', 'viewbox', 'xmlns'],
+  table: [],
+  tbody: [],
+  td: ['style'],
+  text: ['dominant-baseline', 'fill', 'font-size', 'font-weight', 'text-anchor', 'x', 'y'],
+  th: ['style'],
+  thead: [],
+  tr: [],
+  ul: ['class']
+};
+
+const sanitize = html => (0, _sanitizeHtml.default)(html, {
+  allowedTags: tags,
+  allowedAttributes: attributes,
+  disallowedTagsMode: 'discard',
+  // from: default value https://github.com/apostrophecms/sanitize-html#default-options
+  selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta']
+});
+
+exports.sanitize = sanitize;

package/lib/utils/embed-helper.js

@@ -45,7 +45,7 @@ const validateEmbedToken = (str, type) => {
 
 exports.validateEmbedToken = validateEmbedToken;
 
-function sanitaizeEmbedToken(str) {
+function sanitizeEmbedToken(str) {
   return str.replace(/"/g, '%22');
 }
 /** URL文字列か判定する */
@@ -67,7 +67,7 @@ function generateYoutubeHtmlFromVideoId(videoId, start) {
   const time = Math.min(Number(start || 0), 48 * 60 * 60); // 48時間以内
 
   const startQuery = time ? `&start=${time}` : '';
-  return `<div class="embed-youtube"><iframe src="https://www.youtube.com/embed/${escapedVideoId}?loop=1&playlist=${escapedVideoId}${startQuery}" allowfullscreen loading="lazy"></iframe></div>`;
+  return `<span class="embed-block embed-youtube"><iframe src="https://www.youtube.com/embed/${escapedVideoId}?loop=1&playlist=${escapedVideoId}${startQuery}" allowfullscreen loading="lazy"></iframe></span>`;
 }
 /** Youtube の埋め込み要素の文字列を生成する */
 
@@ -90,7 +90,7 @@ function generateEmbedIframe(type, src) {
   const encodedSrc = encodeURIComponent(src);
   const id = `zenn-embedded__${Math.random().toString(16).slice(2)}`;
   const iframeSrc = `https://embed.zenn.studio/${encodedType}#${id}`;
-  return `<div class="zenn-embedded zenn-embedded-${encodedType}"><iframe id="${id}" src="${iframeSrc}" data-content="${encodedSrc}" frameborder="0" scrolling="no" loading="lazy"></iframe></div>`;
+  return `<span class="embed-block zenn-embedded zenn-embedded-${encodedType}"><iframe id="${id}" src="${iframeSrc}" data-content="${encodedSrc}" frameborder="0" scrolling="no" loading="lazy"></iframe></span>`;
 }
 /** 渡された文字列から埋め込み要素のHTMLを生成する関数をまとめたオブジェクト */
 
@@ -109,7 +109,7 @@ const embedGenerators = {
       return 'Slide Shareのkeyが不正です';
     }
 
-    return `<div class="embed-slideshare"><iframe src="https://www.slideshare.net/slideshow/embed_code/key/${(0, _utils.escapeHtml)(key)}" scrolling="no" allowfullscreen loading="lazy"></iframe></div>`;
+    return `<span class="embed-block embed-slideshare"><iframe src="https://www.slideshare.net/slideshow/embed_code/key/${(0, _utils.escapeHtml)(key)}" scrolling="no" allowfullscreen loading="lazy"></iframe></span>`;
   },
 
   speakerdeck(key) {
@@ -117,7 +117,7 @@ const embedGenerators = {
       return 'Speaker Deckのkeyが不正です';
     }
 
-    return `<div class="embed-speakerdeck"><iframe src="https://speakerdeck.com/player/${(0, _utils.escapeHtml)(key)}" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></div>`;
+    return `<span class="embed-block embed-speakerdeck"><iframe src="https://speakerdeck.com/player/${(0, _utils.escapeHtml)(key)}" scrolling="no" allowfullscreen allow="encrypted-media" loading="lazy"></iframe></span>`;
   },
 
   jsfiddle(str) {
@@ -133,7 +133,7 @@ const embedGenerators = {
       url = url.endsWith('/') ? `${url}embedded/` : `${url}/embedded/`;
     }
 
-    return `<div class="embed-jsfiddle"><iframe src="${sanitaizeEmbedToken(url)}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
+    return `<span class="embed-block embed-jsfiddle"><iframe src="${sanitizeEmbedToken(url)}" scrolling="no" frameborder="no" loading="lazy"></iframe></span>`;
   },
 
   codepen(str) {
@@ -143,7 +143,7 @@ const embedGenerators = {
 
     const url = new URL(str.replace('/pen/', '/embed/'));
     url.searchParams.set('embed-version', '2');
-    return `<div class="embed-codepen"><iframe src="${sanitaizeEmbedToken(url.toString())}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
+    return `<span class="embed-block embed-codepen"><iframe src="${sanitizeEmbedToken(url.toString())}" scrolling="no" frameborder="no" loading="lazy"></iframe></span>`;
   },
 
   codesandbox(str) {
@@ -151,7 +151,7 @@ const embedGenerators = {
       return '「https://codesandbox.io/embed/」から始まる正しいURLを入力してください';
     }
 
-    return `<div class="embed-codesandbox"><iframe src="${sanitaizeEmbedToken(str)}" style="width:100%;height:500px;border:none;overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" loading="lazy" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe></div>`;
+    return `<span class="embed-block embed-codesandbox"><iframe src="${sanitizeEmbedToken(str)}" style="width:100%;height:500px;border:none;overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" loading="lazy" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe></span>`;
   },
 
   stackblitz(str) {
@@ -159,7 +159,7 @@ const embedGenerators = {
       return 'StackBlitzのembed用のURLを指定してください';
     }
 
-    return `<div class="embed-stackblitz"><iframe src="${sanitaizeEmbedToken(str)}" scrolling="no" frameborder="no" loading="lazy"></iframe></div>`;
+    return `<span class="embed-block embed-stackblitz"><iframe src="${sanitizeEmbedToken(str)}" scrolling="no" frameborder="no" loading="lazy"></iframe></span>`;
   },
 
   tweet(str) {
@@ -169,12 +169,12 @@ const embedGenerators = {
 
   blueprintue(str) {
     if (!(0, _urlMatcher.isBlueprintUEUrl)(str)) return '「https://blueprintue.com/render/」から始まる正しいURLを指定してください';
-    return `<div class="embed-blueprintue"><iframe src="${sanitaizeEmbedToken(str)}" width="100%" style="aspect-ratio: 16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></div>`;
+    return `<span class="embed-block embed-blueprintue"><iframe src="${sanitizeEmbedToken(str)}" width="100%" style="aspect-ratio: 16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></span>`;
   },
 
   figma(str) {
     if (!(0, _urlMatcher.isFigmaUrl)(str)) return 'ファイルまたはプロトタイプのFigma URLを指定してください';
-    return `<div class="embed-figma"><iframe src="https://www.figma.com/embed?embed_host=zenn&url=${sanitaizeEmbedToken(str)}" width="100%" style="aspect-ratio: 16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></div>`;
+    return `<span class="embed-block embed-figma"><iframe src="https://www.figma.com/embed?embed_host=zenn&url=${sanitizeEmbedToken(str)}" width="100%" style="aspect-ratio: 16/9" scrolling="no" frameborder="no" loading="lazy" allowfullscreen></iframe></span>`;
   },
 
   card(str) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-markdown-html",
-  "version": "0.1.127",
+  "version": "0.1.128-alpha.0",
   "license": "MIT",
   "description": "Convert markdown to zenn flavor html.",
   "main": "lib/index.js",
@@ -30,6 +30,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^14.0.5",
     "@types/prismjs": "^1.26.0",
+    "@types/sanitize-html": "^2.6.2",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
     "babel-jest": "^28.1.1",
@@ -51,9 +52,10 @@
     "markdown-it-inline-comments": "^1.0.1",
     "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-task-lists": "^2.1.1",
-    "prismjs": "^1.27.0"
+    "prismjs": "^1.27.0",
+    "sanitize-html": "^2.7.2"
   },
-  "gitHead": "1f58a345bc4698c9d69a57e447bf61ebee1adeb8",
+  "gitHead": "021f59280b081b53781f367d4568a052842231e2",
   "publishConfig": {
     "access": "public"
   }