Как обслуживать баннер как скрипт js

Question

Я работаю над проектом сборки, где нам нужно предоставить основной заголовок/логотип на различные сторонние сайты. Я думаю, что лучший способ сделать это - предоставить единый URL-адрес сценария для JS-файла, размещенного на нашем веб-сайте, который будет содержать все CSS-запросы (включая медиа-запросы), путь к файлу логотипа и текст (в отличие от предоставления их отдельно каждому клиенту).

Может ли кто-нибудь поделиться советами о том, как наилучшим образом достичь этого?

Answer 1

Я думаю, что лучший способ сделать это было бы поставить один единственный адрес скрипта

Нет, это далеко от идеала и для вас и ваших партнеров.

Единственный способ добавить CSS на страницу - это создать тег стиля, который может быть запрещен CSP веб-сайта партнера. Кеппинг CSS как файла seeprate имеет больше смысла, хотя вы по-прежнему не учитываете возможность использования собственной страницы, переопределяя это. Кроме того, как только вы можете ввести JS на страницу, тогда вы полностью контролируете, что она делает и как оно выложено - лучшим решением (из POV партнера) является использование iframe.

Это также производятся в первую очередь вы инъекционные проблемы с производительностью с помощью document.write

Answer 2

Это самый простой (не может быть лучше, хотя) подход я придумал.

PHP файл называется banner.js:

<?php 

header("content-type: application/x-javascript"); 
header("Content-Type: text/html; charset={$_GET['charset']}"); 

$id = $_GET['id']; 

$client = new Client($id); // You of course need to make some kind of class to retrieve client specific data 

// CSS 
echo "document.write('<style>.banner{ width: " . $client->banner_width() . " }</style>')"; 

// HTML 
echo "document.write('<div class=\"banner\">')"; 
echo "document.write('<img src=\"" . $client->image_path() . "\" height=\"" . $client->image_height() . "\" alt=\"" . $client->image_alt() . "\" >')"; 
echo "document.write('</div>')"; 

?> 

код, что ваш клиент будет вставить на свой сайт:

<script type="text/javascript" src="//app.com/js/banner.js?id={client_id}&charset=UTF-8"></script>