Skip to content

Commit 6159b83

Browse files
committed
feat(frontend): 页脚部分代码注入支持执行js脚本
页脚部分代码注入支持执行js脚本
1 parent 4bce7f5 commit 6159b83

9 files changed

Lines changed: 47 additions & 25 deletions

File tree

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
12.85
1+
12.86

frontend/src/components/ArticleReader.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ArticlePreview from './ArticlePreview.jsx';
99
import CommentSection from './CommentSection.jsx';
1010
import TagSidebar from "./TagSidebar.jsx";
1111
import TableOfContents from './TableOfContents.jsx';
12+
import ScriptAwareHtml from './ScriptAwareHtml';
1213

1314
export default function ArticleReader() {
1415
const { articleId } = useParams();
@@ -399,9 +400,7 @@ export default function ArticleReader() {
399400
</a>
400401
</p>
401402
)}
402-
{footerCode && (
403-
<div dangerouslySetInnerHTML={{ __html: footerCode }} />
404-
)}
403+
{footerCode && <ScriptAwareHtml html={footerCode} />}
405404
</div>
406405
</div>
407406
</footer>

frontend/src/components/CustomHtmlPage.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import CategorySidebar from './CategorySidebar';
77
import TagSidebar from './TagSidebar';
88
import RecommendedArticles from './RecommendedArticles';
99
import PageNotFound from './PageNotFound';
10+
import ScriptAwareHtml from './ScriptAwareHtml';
1011

1112
const CustomHtmlPage = () => {
1213
const { alias } = useParams();
@@ -261,9 +262,7 @@ const CustomHtmlPage = () => {
261262
</a>
262263
</p>
263264
)}
264-
{footerCode && (
265-
<div dangerouslySetInnerHTML={{ __html: footerCode }} />
266-
)}
265+
{footerCode && <ScriptAwareHtml html={footerCode} />}
267266
</div>
268267
</div>
269268
</footer>

frontend/src/components/ForgotPassword.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react'
22
import { useNavigate, Link } from 'react-router-dom'
33
import apiClient from '../utils/axios.jsx'
44
import Header from './Header'
5+
import ScriptAwareHtml from './ScriptAwareHtml'
56

67
export default function ForgotPassword() {
78
const [step, setStep] = useState(1)
@@ -476,9 +477,7 @@ export default function ForgotPassword() {
476477
</a>
477478
</p>
478479
)}
479-
{footerCode && (
480-
<div dangerouslySetInnerHTML={{ __html: footerCode }} />
481-
)}
480+
{footerCode && <ScriptAwareHtml html={footerCode} />}
482481
</div>
483482
</div>
484483
</footer>

frontend/src/components/FriendLinks.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Hero from './Hero';
55
import CategorySidebar from './CategorySidebar';
66
import TagSidebar from './TagSidebar';
77
import RecommendedArticles from './RecommendedArticles';
8+
import ScriptAwareHtml from './ScriptAwareHtml';
89

910
const FriendLinks = () => {
1011
const [friendLinks, setFriendLinks] = useState([]);
@@ -550,9 +551,7 @@ const FriendLinks = () => {
550551
</a>
551552
</p>
552553
)}
553-
{footerCode && (
554-
<div dangerouslySetInnerHTML={{ __html: footerCode }} />
555-
)}
554+
{footerCode && <ScriptAwareHtml html={footerCode} />}
556555
</div>
557556
</div>
558557
</footer>

frontend/src/components/Login.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react'
22
import { useNavigate, Link } from 'react-router-dom'
33
import apiClient from '../utils/axios.jsx'
44
import Header from './Header'
5+
import ScriptAwareHtml from './ScriptAwareHtml'
56

67
export default function Login() {
78
const [formData, setFormData] = useState({
@@ -333,9 +334,7 @@ export default function Login() {
333334
</a>
334335
</p>
335336
)}
336-
{footerCode && (
337-
<div dangerouslySetInnerHTML={{ __html: footerCode }} />
338-
)}
337+
{footerCode && <ScriptAwareHtml html={footerCode} />}
339338
</div>
340339
</div>
341340
</footer>

frontend/src/components/Register.jsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react'
22
import { useNavigate, Link } from 'react-router-dom'
33
import apiClient from '../utils/axios'
44
import Header from './Header'
5+
import ScriptAwareHtml from './ScriptAwareHtml'
56

67
export default function Register() {
78
const [formData, setFormData] = useState({
@@ -262,9 +263,7 @@ export default function Register() {
262263
</a>
263264
</p>
264265
)}
265-
{footerCode && (
266-
<div dangerouslySetInnerHTML={{ __html: footerCode }} />
267-
)}
266+
{footerCode && <ScriptAwareHtml html={footerCode} />}
268267
</div>
269268
</div>
270269
</footer>
@@ -508,9 +507,7 @@ export default function Register() {
508507
</a>
509508
</p>
510509
)}
511-
{footerCode && (
512-
<div dangerouslySetInnerHTML={{ __html: footerCode }} />
513-
)}
510+
{footerCode && <ScriptAwareHtml html={footerCode} />}
514511
</div>
515512
</div>
516513
</footer>
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { useRef, useEffect } from 'react';
2+
3+
export default function ScriptAwareHtml({ html }) {
4+
const containerRef = useRef(null);
5+
6+
useEffect(() => {
7+
if (!containerRef.current || !html) return;
8+
9+
containerRef.current.innerHTML = html;
10+
11+
const srcRegex = /<script\s+[^>]*src\s*=\s*["']([^"']+)["'][^>]*><\/script>/gi;
12+
let match;
13+
while ((match = srcRegex.exec(html)) !== null) {
14+
const script = document.createElement('script');
15+
script.src = match[1];
16+
document.head.appendChild(script);
17+
}
18+
19+
const inlineRegex = /<script>([\s\S]*?)<\/script>/gi;
20+
while ((match = inlineRegex.exec(html)) !== null) {
21+
const script = document.createElement('script');
22+
script.textContent = match[1];
23+
document.head.appendChild(script);
24+
script.remove();
25+
}
26+
}, [html]);
27+
28+
if (!html) return null;
29+
30+
return <div ref={containerRef} />;
31+
}

frontend/src/pages/Home.jsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ArticleList from "../components/ArticleList.jsx";
66
import CategorySidebar from '../components/CategorySidebar';
77
import TagSidebar from '../components/TagSidebar';
88
import RecommendedArticles from '../components/RecommendedArticles';
9+
import ScriptAwareHtml from '../components/ScriptAwareHtml';
910

1011
import apiClient from '../utils/axios';
1112

@@ -157,9 +158,7 @@ export default function Home() {
157158
</a>
158159
</p>
159160
)}
160-
{footerCode && (
161-
<div dangerouslySetInnerHTML={{ __html: footerCode }} />
162-
)}
161+
{footerCode && <ScriptAwareHtml html={footerCode} />}
163162
</div>
164163
</div>
165164
</footer>

0 commit comments

Comments
 (0)