mirror of
https://github.com/MichMich/MagicMirror.git
synced 2026-04-23 22:37:01 +00:00
I was playing around with the newsfeed notification system (`ARTICLE_MORE_DETAILS`, `ARTICLE_TOGGLE_FULL`, …) and discovered some issues with the full article view: The iframe was loading the CORS proxy URL instead of the actual article URL, which could cause blank screens depending on the feed. Also, many news sites block iframes entirely (`X-Frame-Options: DENY`) and the user got no feedback at all — just an empty page. On top of that, scrolling used `window.scrollTo()` which moved the entire MagicMirror page instead of just the article. This PR cleans that up: - Use the raw article URL for the iframe (CORS proxy is only needed for server-side feed fetching) - Check `X-Frame-Options` / `Content-Security-Policy` headers server-side before showing the iframe — if the site blocks it, show a brief "Article cannot be displayed here." message and return to normal view - Show the iframe as a fixed full-screen overlay so other modules aren't affected, scroll via `container.scrollTop` - Keep the progressive disclosure behavior for `ARTICLE_MORE_DETAILS` (title → description → iframe → scroll) - Delete `fullarticle.njk`, replace with `getDom()` override - Fix `ARTICLE_INFO_RESPONSE` returning proxy URL instead of real URL - A few smaller fixes (negative scroll, null guard) - Add `NEWSFEED_ARTICLE_UNAVAILABLE` translation to all 47 language files - Add e2e tests for the notification handlers (`ARTICLE_NEXT`, `ARTICLE_PREVIOUS`, `ARTICLE_INFO_REQUEST`, `ARTICLE_LESS_DETAILS`) ## What this means for users - The full article view now works reliably across different feeds - If a news site blocks iframes, the user sees a brief message instead of a blank screen - Additional e2e tests make the module more robust and less likely to break silently in future MagicMirror versions
100 lines
3.3 KiB
JavaScript
100 lines
3.3 KiB
JavaScript
const NodeHelper = require("node_helper");
|
|
const Log = require("logger");
|
|
const NewsfeedFetcher = require("./newsfeedfetcher");
|
|
|
|
module.exports = NodeHelper.create({
|
|
// Override start method.
|
|
start () {
|
|
Log.log(`Starting node helper for: ${this.name}`);
|
|
this.fetchers = [];
|
|
},
|
|
|
|
// Override socketNotificationReceived received.
|
|
socketNotificationReceived (notification, payload) {
|
|
if (notification === "ADD_FEED") {
|
|
this.createFetcher(payload.feed, payload.config);
|
|
} else if (notification === "CHECK_ARTICLE_URL") {
|
|
this.checkArticleUrl(payload.url);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Checks whether a URL can be displayed in an iframe by inspecting
|
|
* X-Frame-Options and Content-Security-Policy headers server-side.
|
|
* @param {string} url The article URL to check.
|
|
*/
|
|
async checkArticleUrl (url) {
|
|
try {
|
|
const response = await fetch(url, { method: "HEAD" });
|
|
const xfo = response.headers.get("x-frame-options");
|
|
const csp = response.headers.get("content-security-policy");
|
|
// sameorigin also blocks since the article is on a different origin than MM
|
|
const blockedByXFO = xfo && ["deny", "sameorigin"].includes(xfo.toLowerCase().trim());
|
|
const blockedByCSP = csp && (/frame-ancestors\s+['"]?none['"]?/).test(csp);
|
|
this.sendSocketNotification("ARTICLE_URL_STATUS", { url, canFrame: !blockedByXFO && !blockedByCSP });
|
|
} catch {
|
|
// Network error or HEAD not supported — let the browser try the iframe anyway
|
|
this.sendSocketNotification("ARTICLE_URL_STATUS", { url, canFrame: true });
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Creates a fetcher for a new feed if it doesn't exist yet.
|
|
* Otherwise it reuses the existing one.
|
|
* @param {object} feed The feed object
|
|
* @param {object} config The configuration object
|
|
*/
|
|
createFetcher (feed, config) {
|
|
const url = feed.url || "";
|
|
const encoding = feed.encoding || "UTF-8";
|
|
const reloadInterval = feed.reloadInterval || config.reloadInterval || 5 * 60 * 1000;
|
|
const useCorsProxy = feed.useCorsProxy ?? true;
|
|
|
|
try {
|
|
new URL(url);
|
|
} catch (error) {
|
|
Log.error("Error: Malformed newsfeed url: ", url, error);
|
|
this.sendSocketNotification("NEWSFEED_ERROR", { error_type: "MODULE_ERROR_MALFORMED_URL" });
|
|
return;
|
|
}
|
|
|
|
let fetcher;
|
|
if (typeof this.fetchers[url] === "undefined") {
|
|
Log.log(`Create new newsfetcher for url: ${url} - Interval: ${reloadInterval}`);
|
|
fetcher = new NewsfeedFetcher(url, reloadInterval, encoding, config.logFeedWarnings, useCorsProxy);
|
|
|
|
fetcher.onReceive(() => {
|
|
this.broadcastFeeds();
|
|
});
|
|
|
|
fetcher.onError((fetcher, errorInfo) => {
|
|
Log.error("Error: Could not fetch newsfeed: ", fetcher.url, errorInfo.message || errorInfo);
|
|
this.sendSocketNotification("NEWSFEED_ERROR", {
|
|
error_type: errorInfo.translationKey
|
|
});
|
|
});
|
|
|
|
this.fetchers[url] = fetcher;
|
|
} else {
|
|
Log.log(`Use existing newsfetcher for url: ${url}`);
|
|
fetcher = this.fetchers[url];
|
|
fetcher.setReloadInterval(reloadInterval);
|
|
fetcher.broadcastItems();
|
|
}
|
|
|
|
fetcher.startFetch();
|
|
},
|
|
|
|
/**
|
|
* Creates an object with all feed items of the different registered feeds,
|
|
* and broadcasts these using sendSocketNotification.
|
|
*/
|
|
broadcastFeeds () {
|
|
const feeds = {};
|
|
for (const url in this.fetchers) {
|
|
feeds[url] = this.fetchers[url].items;
|
|
}
|
|
this.sendSocketNotification("NEWS_ITEMS", feeds);
|
|
}
|
|
});
|