📝
Lambda コンソールからコードの閲覧を制限する Chrome 拡張機能を作ってみた
GetFunction - AWS Lambda
Lambda コンソール上でコードの閲覧を制限する場合、GetFunction のアクションを制限することで実現できます。
しかし、GetFunction を制限した場合にはコード以外の設定にも閲覧制限がかかります。
そこで、今回は Lambda コンソールからコードの閲覧を制限する Chrome 拡張機能を作ってみました。
概要
- Lambda コンソールでコードの閲覧を制限
- Lambda コンソールのコードのダウンロードボタンクリックを制限
1. 拡張機能のフォルダとファイル作成
ローカル PC 内に任意のフォルダを作成し、以下のファイルを作成します。
- manifest.json
- content.js
- styles.css
今回は以下のようなフォルダ構成にしました。
lambda-code-blocker/
├── manifest.json
├── content.js
├── styles.css
2. ファイルの編集
各種ファイルの内容は以下の通りです。
manifest.json
manifest.json
{
"manifest_version": 3,
"name": "Lambda Code Blocker",
"version": "1.0",
"description": "Lambda コンソールでコード部分の閲覧を禁止します",
"permissions": ["scripting"],
"content_scripts": [
{
"matches": [
"https://console.aws.amazon.com/lambda/*",
"https://*.console.aws.amazon.com/lambda/*"
],
"js": ["content.js"],
"css": ["styles.css"]
}
]
}
content.js
content.js
function blockCodeDisplay() {
const codeSourceSection = document.getElementById("codeSourceSection");
if (codeSourceSection && codeSourceSection.style.display !== "none") {
codeSourceSection.style.display = "none";
const existingMessage = document.getElementById(
"lambda-code-blocker-message"
);
if (existingMessage) {
existingMessage.remove();
}
const messageDiv = document.createElement("div");
messageDiv.id = "lambda-code-blocker-message";
messageDiv.style.cssText =
"padding:40px 20px!important;background-color:#f3f4f6!important;border:2px solid #d1d5db!important;color:#374151!important;font-weight:bold!important;font-size:16px!important;text-align:center!important;border-radius:4px!important;margin:20px 0!important;";
messageDiv.textContent = "⚠️ コード閲覧は制限されています";
codeSourceSection.parentNode.insertBefore(
messageDiv,
codeSourceSection.nextSibling
);
}
}
function disableDownloadButton() {
document.querySelectorAll("button").forEach((button) => {
if (
button.textContent.includes("ダウンロード") &&
!button.dataset.blockerProcessed
) {
button.disabled = true;
button.style.opacity = "0.5";
button.style.cursor = "not-allowed";
button.style.pointerEvents = "none";
button.dataset.blockerProcessed = "true";
button.addEventListener(
"click",
(e) => {
e.preventDefault();
e.stopPropagation();
},
true
);
}
});
}
document.addEventListener("DOMContentLoaded", () => {
blockCodeDisplay();
disableDownloadButton();
});
let mutationCount = 0;
const observer = new MutationObserver(() => {
if (mutationCount++ > 500) {
observer.disconnect();
return;
}
blockCodeDisplay();
disableDownloadButton();
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
styles.css
styles.css
#codeSourceSection {
display: none !important;
}
.code-section {
display: none !important;
}
.ide-container {
display: none !important;
}
iframe#editor {
display: none !important;
}
[data-testid="lambda-code-editor"],
.monaco-editor,
.editor-container,
[class*="CodeEditor"],
[class*="code-editor"],
div[class*="editor"] {
display: none !important;
}
textarea[data-testid*="code"],
pre[class*="code"],
.aws-code-editor {
display: none !important;
}
3. Chrome で読み込む
Chrome の拡張機能のページから手順 1 で作成したフォルダを読み込みます。
4. 動作確認
Lambda コンソールでコードの閲覧とダウンロードが制限されていれば OK です。
注意点
AWS CLIでLambda関数のソースコードをダウンロードする手順 | iret.media
上記ブログの手順で AWS CLI からコードをダウンロードすることは可能です。
なお、本拡張機能は AWS 公式ツールではないので拡張機能の使用は自己責任でお願いします。
まとめ
今回は Lambda コンソールからコードの閲覧を制限する Chrome 拡張機能を作ってみました。
どなたかの参考になれば幸いです。
Discussion