ブラウザの拡張機能

私はちょうどgithubのUIからコードツアーを実行することができますクロムとFirefoxの新しい拡張機能を公開しました.コード旅行とこのブログ柱の拡大に関する詳細情報.

Githubを離れることなくコードツアーを実行する

クェンティンM・ Jan 18・ 1分読む

#news #chrome #firefox #extension

私は、あなたがステップで正確に同じことをする方法についてのシリーズを書くのが楽しいと思いました.
この5番目のブログ記事は、ウェブサイトにしっかりとあなたの機能を統合することに焦点を当てます.

短い通知

この拡張モジュールの一部では、いくつかの外部モジュールをインポートする必要があります.
私はこのポストでWebpackのセットアップ方法を説明しません、しかし、あなたが興味がある何かであるならば、コメントを落としてください、そして、私はこれについてシリーズでもう一つのポストを書くかもしれません.

建築物

我々がこのポストの終わりにあるもののスクリーンショットは、ここにあります.コードツアーステップの説明を安全に表示します.

挑戦

コードツアーをユーザーに表示するには、次の手順を実行します.

は、旅行242479182のリストを見つけます

各コードツアー

の内容を取得する

は右ページ

にリダイレクトします
コードツアーの内容で適切な場所にいるので、ページにロードする必要があります.
コードツアーの内容は、Markdown言語を用いて記述する.MarkdownのHTMLを生成する方法がありますが、安全であることを確認する必要があります.
しかし、まず基本的なバージョンを構築しましょう!

イノセントバージョン

まず、UIに直接テキストを追加しましょう.これまでのコードは以下の通りです.

function forwardRequest(message) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage(message, (response) => {
      if (!response) return reject(chrome.runtime.lastError);
      return resolve(response);
    });
  });
}

document.addEventListener("DOMContentLoaded", async () => {
  const urlParams = new URLSearchParams(window.location.search);
  const title = urlParams.get("code-tour-title");
  if (!title) return;

  const tour = await forwardRequest({ title });

  const step = urlParams.get("step");
  console.log(tour.steps[step]);
});

さて、状態をログオンする代わりに、右側の行の説明を追加しましょう.

document.addEventListener("DOMContentLoaded", async () => {
  const urlParams = new URLSearchParams(window.location.search);
  const title = urlParams.get("code-tour-title");
  if (!title) return;

  const tour = await forwardRequest({ title });

  const step = urlParams.get("step");

  // We'll add the description on the right line
  const parent = document.querySelector(
    `#LC${tour.steps[step].line}.blob-code`
  );
  const section = document.createElement("div");

  const span = document.createElement("span");
  span.innerHTML = tour.steps[step].description;

  section.append(span);

  // A bit of style
  section.setAttribute(
    "style",
    `
    padding: 14px;
    margin: 14px;
    border: 1px lightgrey solid;
    background-color: white;
    border-radius: 1em;
    font-family: sans-serif;
    `
  );

  parent.append(section);
});

変換する

MarkdownをHTMLに変換するために、showdownなどの発電機を使用できます.それは本当に使いやすいです:

const showdown = require('showdown')
const converter = new showdown.Converter()
const htmlString = converter.makeHtml(yourMarkdownString)

ここでは、セクションの内部HTMLとして使用できます.

span.innerHTML = converter.makeHtml(tour.steps[step].description);

マークダウンによるXSS注射

Markdown世代はHTMLを書くことができるので、危険なコードを生成することもできます.次のマークダウンコードを考えます.

[XSS injection](javascript:alert('xss'))

HTMLコード(例えばshowdownなど)を使用すると、このHTMLを取得します.

<p><a href="javascript:alert('xss')">XSS injection</a></p>

ブラウザでこれを試してみてください.もちろんこれは非常に基本的な例ですが、これを利用するより複雑な方法がたくさんあります.そして、我々がロードするコード旅行が信頼できないコードであるので、我々はより我々のユーザーを保護します!

XSSからの保護

XSSから保護するために使用できるライブラリがいくつかあります.たとえば、NPMのxssライブラリ.
これを使用して、我々は我々のHTMLの危険なビットを逃れることができます.ちょっとこの方法を使ってください.

filterXSS(converter.makeHtml(rawText))

コードで使用しましょう.

span.innerHTML = filterXSS(converter.makeHtml(tour.steps[step].description));

現在、我々のユーザーは保護されます.

結論

このポストから覚えておかなければならないことが一つあるならば、

don't trust external inputs, even if it's text

あなたがコントロールのない何かへのどんな種類の転換も適用するとすぐに、それが悪用される危険があります.そして、私を信頼してください、コードがあなたのブラウザーでどんなウェブサイトにでもロードされることができる拡大であるとき、それはより悪い方法です.
次の投稿では、この拡張モジュールを別のストアに展開する方法を参照してください.それが出ているとき、あなたがポストをチェックしたいならば、ここで私について来てください
-アクションボタン
バックグラウンドカラー:けっこうffffff!重要
色:千円!重要
ボーダーカラー:こっち重要
｝

クェンティンM

Engineering Manager @Doctolib – Mostly writing about TypeScript / JavaScript
Ricardo Gomez AngelのUnsplashによる写真