Nextcloud App增加模块内嵌网页

本文介绍了一个Nextcloud内嵌网页插件webviewwidget的开发过程。该插件允许在Dashboard中添加iframe网页视图，主要解决了CSP策略拦截问题。通过自定义ContentSecurityPolicy类添加addAllowedFrameDomain(‘*’)来允许任意域名嵌入，并提供了完整的目录结构和关键代码示例，包括控制器设置、路由配置和模板文件。最终实现了在Nextcloud 31.0.5.1版本中安全嵌入外部网页的功能。

ps: 嵌入网页的用意是在nextcloud的app端可以打开自己的网页,下面就开始进入正题…

services:nextcloud:image: nextcloudenvironment:- PHP_OPCACHE_MEMORY_CONSUMPTION=256volumes:- ./nextcloud_html:/var/www/htmlports:- "80:80"

nextcould版本 ‘version’ => ‘31.0.5.1’,

#清缓存
$ php occ maintenance:repair --include-expensive

├── appinfo
│   ├── info.xml
│   └── routes.php
├── css
│   └── webview.css
├── img
│   └── net.svg
├── lib
│   └── Controller
│       └── WebViewController.php
└── templates└── main.php

appinfo/info.xml

<?xml version="1.0"?>
<info xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="https://apps.nextcloud.com/schema/apps/info.xsd"><id>webviewwidget</id><name>内嵌网页</name><summary>在 Dashboard 里放 iframe</summary><description><![CDATA[最小可运行 demo：Dashboard webviewWidget。启用后，用户可在「自定义」里添加「内嵌网页」模块。]]></description><version>1.0.0</version><licence>agpl</licence><author>NC Demo</author><namespace>WebviewWidget</namespace><category>dashboard</category><dependencies><nextcloud min-version="31" max-version="31"/></dependencies><navigations><navigation><id>webview</id><name>内嵌网页</name><route>webviewwidget.webview.view</route><icon>/custom_apps/webviewwidget/img/net.svg</icon><order>80</order>   <!-- 数字越大越靠后 --><type>link</type></navigation>
</navigations>
</info>

appinfo/routes.php

<?php
return ['routes' => [['name' => 'webview#view', 'url' => '/webview', 'verb' => 'GET']]
];

css/webview.css

#app {width: 100%;height: calc(100vh - 50px); /* 去掉顶部栏高度 */
}
#app iframe {width: 100%;height: 100%;
}

svg图标,去网上找一个

• Nextcloud 只接受 SVG 矢量图 作为顶部导航图标，
  .ico、.png、.jpg 都会被忽略或显示成 空白/破图

解决 CSP 拦截（重点）

webview:129 Refused to frame 'https://example.com/ ’ because it violates the following Content Security Policy directive: “frame-src ‘self’”.

异常响应头
frame-src ‘self’; 事件监听 仍然没生效，NC 31 还是走的默认 CSP。

Content-Security-Policy: default-src 'none';base-uri 'none';manifest-src 'self';script-src 'nonce-/OLkPjlThFuh8Qj5XvikJdztIGop05wYfsXxNIBJox0=';script-src-elem 'strict-dynamic' 'nonce-/OLkPjlThFuh8Qj5XvikJdztIGop05wYfsXxNIBJox0=';style-src 'self' 'unsafe-inline';img-src 'self' data: blob: https://*.tile.openstreetmap.org;font-src 'self' data:;connect-src 'self';media-src 'self';frame-src 'self';frame-ancestors 'self';form-action 'self'

增加如下控制器
lib/Controller/WebViewController.php

<?php
declare(strict_types=1);
namespace OCA\WebviewWidget\Controller;use OCP\AppFramework\Controller;
use OCP\AppFramework\Http\TemplateResponse;
use OCP\IRequest;class WebViewController extends Controller {public function __construct(IRequest $request) {parent::__construct('webviewwidget', $request);}/*** @NoAdminRequired* @NoCSRFRequired*/public function view(): TemplateResponse {$response = new TemplateResponse('webviewwidget', 'main');// 关键：覆盖默认 CSP$csp = new \OCP\AppFramework\Http\ContentSecurityPolicy();$csp->addAllowedFrameDomain('*');$response->setContentSecurityPolicy($csp);return $response;}
}

能正常访问的响应头

Content-Security-Policy: default-src 'none';base-uri 'none';manifest-src 'self';script-src 'nonce-cdPOruzwkSjGokPijyoieLdf495o2gVQ2yRBkrDRuNU=';script-src-elem 'strict-dynamic' 'nonce-cdPOruzwkSjGokPijyoieLdf495o2gVQ2yRBkrDRuNU=';style-src 'self' 'unsafe-inline';img-src 'self' data: blob: https://*.tile.openstreetmap.org;font-src 'self' data:;connect-src 'self';media-src 'self';frame-src 'self' *;frame-ancestors 'self';form-action 'self'

templates/main.php

<?php
style('webviewwidget', 'webview');
?><div id="app"><iframe src="https://www.baidu.com"width="100%" height="100%"frameborder="0"sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</div>

进入容器, 执行启动

php occ app:enable webviewwidget
webviewwidget:1.0.0

php occ app:disable webviewwidget

最终效果