Dangers of allowing custom CSS - css

I'm creating a website that allows users to create their own subchannels. Sorts of like subreddits (if you're familiar with reddit).
And I want to make it so that subchannel administrators are allowed to upload their own CSS files (with a max filesize) that would override the default styles for their subchannels. (Users would also be able to opt out of custom styles.)
I've only heard of a few websites doing this so it's kind of hard to get info on the risks involved. Would there be any potential security risks?
I would be doing this with Laravel, for reference.

Javascript can be executed in CSS, you have to make sure that you are using some filtering.
I have also seen incidents where someone has covered the entire page on a microsoft controlled site with a transparent pixel, linking to a malicious site. Clicking anywhere triggered the attackers site to appear.
This could however be safe if the user only sees his or her own CSS, and they would have no way of someone else viewing what they have done. Otherwise some sort of whitelist or markdown would work.
There is also the potential that the user CSS could break your site, for example making the navigation menu 0x0 pixels or moving it offscreen to -1000, -1000. Or the CSS itself could reference images from other sites, which you can't guarantee will continue to stay up.

Related

How do I force links to secure content (mainly images) in new posts

In short - I want to force all content of new posts to link to secure sources. Team members were instructed to refrain from including links to non secure sources, but this sometimes slips them (mainly with new images), leading to pages being displayed as having mixed content. When they do, I usually see it and fix the links manually. However, I would like to prevent this from happening altogether so links to external resources are always checked to be secure. Is there a way to enforce it?

SVG Security on WordPress vs. without cms

I understand that it is a risk to use SVG and Wordpress disable the use of them. But many website nowadays use SVG because of the performance and resolution. So are all these websites having a huge risk to get hacked?
If I would code the website in plain html, css, php, mysql without a cms, would my website be highly risked to get hacked too?
SVGs are effectively (XML) text that are interpreted and rendered by the browser. The SVG "text" can include scripts (for valid or malicious reasons). SVG has a lot of benefits. I use animated SVG headers that I created myself on my Wordpress sites; file are small and do not rely on JavaScript for animation.
I assume you are ONLY talking about having your OWN SVG images for the header, or in your own posts (and won't be including malicious scripts to attack you or your visitors!). If so, in my fallible opinion, there should be near Zero (can never say never) risk as long as you cater for these possibilities:
you use an SVG file created by someone else that contains malicious code. So create your own, or obtain them from one of the major image sites and check the SVG source text carefully before use.
a visitor/user uploads (innocently or otherwise) a poisoned SVG. Even if it is not displayed on your site the simple act of you viewing (say via Cpanel) the uploaded file in a browser could trigger the malicious payload. So block anyone else from uploading SVGs. Ideally upload your own via FTP and block all uploads via your site's pages.
see also https://wordpress.stackexchange.com/a/247190/128374

'Rules' to be taken into account when working with cross-domain iframe content

Originally, I was planning on a site that would've involved the manipulation of any elements loaded into an iframe from another domain. I now know that's not possible because of the policy around the origin of it, what other policies are in place that I need to take into account?
I'm asking because although I'm no longer going to attempt to access the iframe contents, I am still going to rely on the iframe as a major source of my site's content and it will, in fact, span the majority of the screen space. Users will be able to navigate to certain sites using the iframe. Is there anything I've got to comply with while doing this? Are there restrictions in the way I use other sites' content?
May seem kind of like the more non-technical kind of topic but I'd rather confirm this prior to spending months of dev work on it.

Using Javascript to get around SEO concerns

I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?
I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!
My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.
Do you experts have any advice? Thank you!
google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html
If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.
Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.
EDIT, additional info as pertaining to the original question:
The search engine friendly way to display content dynamically is to load it, then hide it from the user.

How to serve different cached versions of a page depending on a cookie in Drupal?

The task is relatively straightforward:
A Drupal website displays a list of articles with thumbnails. Some visitors would like to view it without images by clicking on a button/link and have that preference saved.
e.g. http://patterntap.com/collections/index/
The problem is all visitors are anonymous and given certain traffic, page cache is enabled.
My idea was to use some simple JavaScript to set a cookie, refresh the page and depending on the cookie values (or its presence/absence) display or hide the images.
Except Drupal serves cached pages quite early and the only quick way to modify the cached version that I could find is by hacking includes/bootstrap.inc and add a custom class to the body classes then hide the images with css.
A very wrong approach, I know. But I wonder if there is a way to save different versions of a page and serve the correct version?
Edit:
need to keep the same uri
the js to show/hide the images without reload and set the cookie is already in place
hook_boot() is not really called for cached pages, so can't do it via custom module
.htaccess mods?
Edit/solution:
In the end went with Rimian's suggestion. But it is possible to accomplish the task using our own cache.inc implementation as seen in the Mobile Tools module. Specifically, by extending cache.inc and updating settings.php to include
$conf['page_cache_fastpath'] = FALSE;
$conf['cache_inc'] = 'path/to/my/module/my_module_cache.inc';
So let me get this right. You wanna hide some images on a cached page if the user chooses to?
Why don't you write some jQuery or javascript and load that into your cached page with all the rest of the document?
Then, the client/browser would decide to run your script and hide images depending on some parameters you passed along with the request to that page or in the cookie? The script gets cached and only runs when you call it.
If you were hacking the bootstrap for something like that you'd really need to be rethinking what you were doing. Crazy! :)
Also take a look at cache_get and cache_set:
http://api.drupal.org/api/drupal/includes--cache.inc/6
I'm not sure I 100% understand what you are trying to do but here are my thoughts. One of your root problems is that you are trying to access what is essentially different content at the same uri.
If this is truly what you want to do, then Rimian's suggestion of checking out chache_get and chache_set may be worthwhile.
Personally, it seems cleaner to me to have your "with thumbnails" and "without thumbnails" be accessed via different uri's. Depending on exactly what you are wanting to accomplish, a GET variable my be an even better way to go. With either of these two options you would hide or show your thumbnails at the theme layer. Pages with different paths or get variables would get cached separately.
If you want the visitor to be able to switch views without a page reload, then jQuery and a cookie would probably suite your needs. This wouldn't require a page reload and switching back and forth would be quite simple.

Resources