您想在 Discourse 中集成 CSM 吗？让我们看看如何在 Discourse 中集成 HubSpot 聊天！
12 个赞
Hi Daniella, I have tried this integration with three different chat providers and keep getting the same CSP after adding all the links I could find to security policy script src. This particular one is for Tidio, but the same thing happened with LiveChat and Pure Chat. Any ideas what may be happening here?
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). Source: (function injected(eventName, injectedIntoContentWindow)
{
let checkRequest;
/*
* Frame context wrapper
*
* For some edge-cases Chrome will not run content scripts inside of frames.
* Website have started to abuse this fact to access unwrapped APIs via a
* frame's contentWindow (#4586, 5207). Therefore until Chrome runs content
* scripts consistently for all frames we must take care to (re)inject our
* wrappers when the contentWindow is accessed.
*/
let injectedToString = Function.prototype.toString.bind(injected);
let injectedFrames = new WeakSet();
let injectedFramesAdd = WeakSet.prototype.add.bind(injectedFrames);
let injectedFramesHas = WeakSet.prototype.has.bind(injectedFrames);
function injectIntoContentWindow(contentWindow)
{
if (contentWindow && !injectedFramesHas(contentWindow))
{
injectedFramesAdd(contentWindow);
try
{
contentWindow[eventName] = checkRequest;
contentWindow.eval(
"(" + injectedToString() + ")('" + eventName + "', true);"
);
delete contentWindow[eventName];
}
catch (e) {}
}
}
for (let element of [HTMLFrameElement, HTMLIFrameElement, HTMLObjectElement])
{
let contentDocumentDesc = Object.getOwnPropertyDescriptor(
element.prototype, "contentDocument"
);
let contentWindowDesc = Object.getOwnPropertyDescriptor(
element.prototype, "contentWindow"
);
// Apparently in HTMLObjectElement.prototype.contentWindow does not exist
// in older versions of Chrome such as 51.
if (!contentWindowDesc)
continue;
let getContentDocument = Function.prototype.call.bind(
contentDocumentDesc.get
);
let getContentWindow = Function.prototype.call.bind(
contentWindowDesc.get
);
contentWindowDesc.get = function()
{
let contentWindow = getContentWindow(this);
injectIntoContentWindow(contentWindow);
return contentWindow;
};
contentDocumentDesc.get = function()
{
injectIntoContentWindow(getContentWindow(this));
return getContentDocument(this);
};
Object.defineProperty(element.prototype, "contentWindow",
contentWindowDesc);
Object.defineProperty(element.prototype, "contentDocument",
contentDocumentDesc);
}
/*
* RTCPeerConnection wrapper
*
* The webRequest API in Chrome does not yet allow the blocking of
* WebRTC connections.
* See https://bugs.chromium.org/p/chromium/issues/detail?id=707683
*/
let RealCustomEvent = window.CustomEvent;
// If we've been injected into a frame via contentWindow then we can simply
// grab the copy of checkRequest left for us by the parent document. Otherwise
// we need to set it up now, along with the event handling functions.
if (injectedIntoContentWindow)
checkRequest = window[eventName];
else
{
let addEventListener = document.addEventListener.bind(document);
let dispatchEvent = document.dispatchEvent.bind(document);
let removeEventListener = document.removeEventListener.bind(document);
checkRequest = (url, callback) =>
{
let incomingEventName = eventName + "-" + url;
function listener(event)
{
callback(event.detail);
removeEventListener(incomingEventName, listener);
}
addEventListener(incomingEventName, listener);
dispatchEvent(new RealCustomEvent(eventName, {detail: {url}}));
};
}
// Only to be called before the page's code, not hardened.
function copyProperties(src, dest, properties)
{
for (let name of properties)
{
if (Object.prototype.hasOwnProperty.call(src, name))
{
Object.defineProperty(dest, name,
Object.getOwnPropertyDescriptor(src, name));
}
}
}
let RealRTCPeerConnection = window.RTCPeerConnection ||
window.webkitRTCPeerConnection;
// Firefox has the option (media.peerconnection.enabled) to disable WebRTC
// in which case RealRTCPeerConnection is undefined.
if (typeof RealRTCPeerConnection != "undefined")
{
let closeRTCPeerConnection = Function.prototype.call.bind(
RealRTCPeerConnection.prototype.close
);
let RealArray = Array;
let RealString = String;
let {create: createObject, defineProperty} = Object;
let normalizeUrl = url =>
{
if (typeof url != "undefined")
return RealString(url);
};
let safeCopyArray = (originalArray, transform) =>
{
if (originalArray == null || typeof originalArray != "object")
return originalArray;
let safeArray = RealArray(originalArray.length);
for (let i = 0; i < safeArray.length; i++)
{
defineProperty(safeArray, i, {
configurable: false, enumerable: false, writable: false,
value: transform(originalArray[i])
});
}
defineProperty(safeArray, "length", {
configurable: false, enumerable: false, writable: false,
value: safeArray.length
});
return safeArray;
};
// It would be much easier to use the .getConfiguration method to obtain
// the normalized and safe configuration from the RTCPeerConnection
// instance. Unfortunately its not implemented as of Chrome unstable 59.
// See https://www.chromestatus.com/feature/5271355306016768
let protectConfiguration = configuration =>
{
if (configuration == null || typeof configuration != "object")
return configuration;
let iceServers = safeCopyArray(
configuration.iceServers,
iceServer =>
{
let {url, urls} = iceServer;
// RTCPeerConnection doesn't iterate through pseudo Arrays of urls.
if (typeof urls != "undefined" && !(urls instanceof RealArray))
urls = [urls];
return createObject(iceServer, {
url: {
configurable: false, enumerable: false, writable: false,
value: normalizeUrl(url)
},
urls: {
configurable: false, enumerable: false, writable: false,
value: safeCopyArray(urls, normalizeUrl)
}
});
}
);
return createObject(configuration, {
iceServers: {
configurable: false, enumerable: false, writable: false,
value: iceServers
}
});
};
let checkUrl = (peerconnection, url) =>
{
checkRequest(url, blocked =>
{
if (blocked)
{
// Calling .close() throws if already closed.
try
{
closeRTCPeerConnection(peerconnection);
}
catch (e) {}
}
});
};
let checkConfiguration = (peerconnection, configuration) =>
{
if (configuration && configuration.iceServers)
{
for (let i = 0; i < configuration.iceServers.length; i++)
{
let iceServer = configuration.iceServers[i];
if (iceServer)
{
if (iceServer.url)
checkUrl(peerconnection, iceServer.url);
if (iceServer.urls)
{
for (let j = 0; j < iceServer.urls.length; j++)
checkUrl(peerconnection, iceServer.urls[j]);
}
}
}
}
};
// Chrome unstable (tested with 59) has already implemented
// setConfiguration, so we need to wrap that if it exists too.
// https://www.chromestatus.com/feature/5596193748942848
if (RealRTCPeerConnection.prototype.setConfiguration)
{
let realSetConfiguration = Function.prototype.call.bind(
RealRTCPeerConnection.prototype.setConfiguration
);
RealRTCPeerConnection.prototype.setConfiguration = function(configuration)
{
configuration = protectConfiguration(configuration);
// Call the real method first, so that validates the configuration for
// us. Also we might as well since checkRequest is asynchronous anyway.
realSetConfiguration(this, configuration);
checkConfiguration(this, configuration);
};
}
let WrappedRTCPeerConnection = function(...args)
{
if (!(this instanceof WrappedRTCPeerConnection))
return RealRTCPeerConnection();
let configuration = protectConfiguration(args[0]);
// Since the old webkitRTCPeerConnection constructor takes an optional
// second argument we need to take care to pass that through. Necessary
// for older versions of Chrome such as 51.
let constraints = undefined;
if (args.length > 1)
constraints = args[1];
let peerconnection = new RealRTCPeerConnection(configuration,
constraints);
checkConfiguration(peerconnection, configuration);
return peerconnection;
};
WrappedRTCPeerConnection.prototype = RealRTCPeerConnection.prototype;
let boundWrappedRTCPeerConnection = WrappedRTCPeerConnection.bind();
copyProperties(RealRTCPeerConnection, boundWrappedRTCPeerConnection,
["generateCertificate", "name", "prototype"]);
RealRTCPeerConnection.prototype.constructor = boundWrappedRTCPeerConnection;
if ("RTCPeerConnection" in window)
window.RTCPeerConnection = boundWrappedRTCPeerConnection;
if ("webkitRTCPeerConnection" in window)
window.webkitRTCPeerConnection = boundWrappedRTCPeerConnection;
}
})('abp-request-aic05wltexc', true);. 468b7929-46c3-4249-b516-189e58962157:27:22
Another CSP:
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). Source: try { if (typeof Navigator.prototype.sendBeacon === 'function') { Navigator.prototype.sendBeacon = function(url, data) { return true; }; } } catch (exception) { console.error(exception); }. script.js:517:22
And one more (the link here has been added fyi)
Content Security Policy: The page’s settings blocked the loading of a resource at https://widget-v4.tidiochat.com//1_23_3/static/js/widget.a6a6e2b4c2401b7c523f.js (“script-src”). xgahvvrt0kwvb7p6crbxuolt4omnin1u.js:1:12450
你已将该特定 URL 加入白名单了吗？错误消息通常会明确指出需要加入白名单的 URL。
1 个赞
谢谢 Jeff，我之前理解得太字面了，直接使用了整个 URL https://widget-v4.tidiochat.com//1_23_3/static/js/widget.a6a6e2b4c2401b7c523f.js。
现在确实可以工作了。我仍然收到第一条 CSP 警告，如果它确实在正常工作，我是否可以认为可以忽略这条警告？
1 个赞
如果您在 F12 控制台中遇到 CSP 错误，请将错误中提到的域名添加到白名单中。
我指的是第一个没有 URL 的条目，更像是关于 Chrome 中帧上下文包装器问题的警告。奇怪的是，它在 Firefox 中出现了，但在 Chrome 中却没有显示。所以我想我还是忽略它吧，因为它看起来运行正常。感谢你的帮助 
我从未尝试过这个特定的聊天工具
我昨天测试了 LiveChat，它运行正常，没有错误
2 个赞
大家好，
感谢这份出色的指南！我按照指南添加了反馈调查，但 HubSpot 不断更改分析链接（js.hs-analytics/），导致我需要不断将新链接添加到白名单中。
我找到的唯一能持续生效的解决方案是彻底禁用该策略，但这似乎不够安全。
有什么建议吗？
我刚才查看了您的网站，但在“自定义” > “主题”中找不到您输入的调查代码。
编辑：现在应该已修复，我重新启用了 CSP。如果仍有问题，请告诉我。
1 个赞
嘿 @Dax，
谢谢！能否告诉我你是如何解决的，以及问题出在哪里？
编辑：我看到你添加了一个通配符，太棒了！我觉得最好在那个框下面加个注释，这样我们就知道通配符也是一个可选方案了！我其实也想过类似的解决方案，但我太笨了，没去尝试一下。
谢谢！
1 个赞
我很好奇，将 HubSpot 等 CRM 连接到我们的 Discourse 社区站点有什么价值？