asp.net: TinyMCE 要如何在ASP.NET Core中安裝,並安全的使用?

在 ASP.NET Core 中安裝和使用 TinyMCE 是一個簡單的過程，但為了確保安全性，需要注意一些最佳實踐。以下是詳細的步驟：

步驟 1：安裝 TinyMCE

有兩種常見的方法來安裝 TinyMCE：使用 CDN 或下載並本地安裝。

方法一：使用 CDN

這是最簡單的方法，只需在你的 HTML 文件中添加以下腳本和樣式鏈接：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
    <form method="post">
        <textarea id="mytextarea">Hello, World!</textarea>
        <button type="submit">Submit</button>
    </form>

    <script>
    tinymce.init({
        selector: '#mytextarea',
        language: 'zh_TW' // 設置語言為繁體中文
    });
    </script>
</body>
</html>

方法二：本地安裝

你也可以從 TinyMCE 官網下載編輯器並將其包含到你的項目中。將下載的文件放到 wwwroot/lib/tinymce 目錄下，並引用這些文件：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/lib/tinymce/tinymce.min.js"></script>
</head>
<body>
    <form method="post">
        <textarea id="mytextarea">Hello, World!</textarea>
        <button type="submit">Submit</button>
    </form>

    <script>
    tinymce.init({
        selector: '#mytextarea',
        language: 'zh_TW' // 設置語言為繁體中文
    });
    </script>
</body>
</html>

步驟 2：設置 ASP.NET Core 控制器和視圖

創建一個控制器和視圖來處理表單提交。

控制器

在 Controllers 文件夾中創建一個 HomeController：

csharp
using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Index(string content)
    {
        // 在這裡處理提交的內容，並執行必要的安全檢查
        ViewBag.Content = content;
        return View();
    }
}

視圖

在 Views/Home 文件夾中創建 Index.cshtml：

html
@{
    ViewData["Title"] = "Home Page";
}

<form method="post">
    <textarea id="mytextarea" name="content">Hello, World!</textarea>
    <button type="submit">Submit</button>
</form>

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#mytextarea',
        language: 'zh_TW', // 設置語言為繁體中文
        plugins: 'link image', // 僅啟用必要的插件
        valid_elements: 'p,b,i,strong,em,a[href|title],ul,ol,li' // 僅允許這些元素和屬性
    });
</script>

@if (ViewBag.Content != null)
{
    <div>
        <h2>Submitted Content</h2>
        <div>@Html.Raw(ViewBag.Content)</div>
    </div>
}

步驟 3：安全地使用 TinyMCE

輸入驗證和清理

確保在處理用戶輸入時進行適當的驗證和清理。可以使用 HTML 解析庫來過濾用戶輸入的 HTML 內容，以確保其安全。

使用內容安全政策 (CSP)

設置內容安全政策 (CSP) 以限制允許的內容來源，防止潛在的 XSS 攻擊。

csharp
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.Use(async (context, next) =>
    {
        context.Response.Headers.Add("Content-Security-Policy", "default-src 'self'; script-src 'self' https://cdn.tiny.cloud; style-src 'self' https://cdn.tiny.cloud;");
        await next();
    });

    // 其他中間件配置
}

輸出編碼

確保在顯示用戶生成的內容時進行適當的編碼，以防止腳本在瀏覽器中執行。

csharp
public IActionResult Index(string content)
{
    // 使用 HTML 解析庫進行清理
    var sanitizedContent = HtmlSanitizer.Sanitize(content);

    ViewBag.Content = sanitizedContent;
    return View();
}

使用以上步驟和最佳實踐，你可以在 ASP.NET Core 中安全地使用 TinyMCE 來創建和管理博客內容。

Google Code Prettify

TinyMCE 要如何在ASP.NET Core中安裝,並安全的使用?