Voulez-vous intégrer un CSM sur Discourse ? Voyons comment intégrer le chat HubSpot sur Discourse !
créez un compte sur HubSpot
sélectionnez Chat
personnalisez l’interface et la disponibilité comme vous le souhaitez
Copiez le code
Créez un nouveau composant de thème et collez-le dans l’onglet Common - </body>. Ajoutez le nouveau composant à vos thèmes principaux
Terminez la Vérification sur Hubspot pour activer le widget et accédez à votre site web
Terminé 
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
Avez-vous mis cette URL spécifique sur la liste blanche ? Les messages d’erreur indiquent généralement clairement quelles URL doivent être autorisées.
Merci Jeff, je prenais cela trop au pied de la lettre et j’utilisais l’URL complète de https://widget-v4.tidiochat.com//1_23_3/static/js/widget.a6a6e2b4c2401b7c523f.js
Cela fonctionne maintenant. Je reçois toujours la première CSP ; si cela fonctionne, je suppose qu’il est sûr de l’ignorer ?
Si vous rencontrez des erreurs CSP dans votre console F12, vous devez ajouter le domaine indiqué dans l’erreur à la liste blanche.
Je faisais référence au premier, qui n’a pas d’URL, plutôt à un avertissement concernant des problèmes dans Chrome liés à l’enveloppe du contexte de cadre. Étrangement, cela apparaît dans Firefox mais pas dans Chrome. Je pense donc que je vais simplement l’ignorer, car tout semble fonctionner correctement. Merci pour votre aide 
Je n’ai jamais essayé ce chat en particulier.
J’ai testé LiveChat hier et cela fonctionne sans erreur.
Bonjour à tous,
Merci pour ce super guide ! J’ai suivi les étapes pour ajouter un sondage de feedback, mais HubSpot modifie constamment le lien d’analyse (js.hs-analytics/), ce qui m’oblige à ajouter continuellement de nouveaux liens à la liste blanche.
La seule solution que j’ai trouvée pour fonctionner de manière cohérente est de désactiver complètement la politique, mais cela ne semble pas très sécurisé.
Avez-vous des idées ?
Je consulte votre site en ce moment, mais je ne trouve pas le code de sondage que vous avez saisi dans Personnaliser > Thèmes
Édition : Cela devrait être corrigé maintenant, j’ai réactivé la CSP. Faites-moi savoir si vous rencontrez des problèmes.
Salut @Dax,
Merci ! Peux-tu s’il te plaît m’expliquer comment tu as résolu le problème et quelle était la cause ?
Édit : Je vois que tu as ajouté un joker, super ! Je pense qu’il serait préférable d’ajouter un commentaire sous ce champ, afin que nous sachions que les jokers sont également une option ! J’avais envisagé une telle solution, mais moi, bêtement, je n’ai pas essayé.
Merci !
Je suis curieux, quelle est la valeur de connecter un CRM tel que HubSpot à notre site communautaire Discourse ?