Hosting CSS files for users

Question

I'm trying to build a Rails/Heroku app that lets people create skins/themes for simple websites.

Currently, I have a prototype that lets you theme your page, and download a CSS file to embed on your site. I'd like to have the option to host that CSS file for users rather than forcing them to download it.

What's the best way to go about this? Ideally a CSS file made by the user would only work on their domain.

I don't really know anything about CDNs, and couldn't find any similar open source examples on GitHub or Google. If you have any pointers on the best way to accomplish this feature, I'd really appreciate it.

I would look into Amazon AWS - you can integrate it with rails through [paperclip, dragonfly or carrierwave](https://infinum.co/the-capsized-eight/best-rails-image-uploader-paperclip-carrierwave-refile). If you try approaching the problem from the standpoint of uploading and hosting files (not specially CSS files) you'll find that there are plenty of tutorials and resources. — max, Jan 27 '17 at 05:35

score 0 · Answer 1 · edited May 23 '17 at 12:24

Depends on how much you want the user to be able to customize. Do you just want them to be able to select colors for an existing framework, or do you want them to be able to upload their own complete custom stylesheet?

For security, if you're letting users add their own custom stylesheet, the css should get sanitized so a user can't run malicious code (see this answer for example).

If you just want users to be able to customize an existing theme, you could do something like User has_one :style where

class StylesController < ApplicationController
def create
    @style = current_user.build_style(style_params)
    if @style.save
      flash[:success] = "Style saved!"
    end 
  end

  def show
    @style = Style.find(params[:id])

    respond_to do |format|
      format.html
      format.css
    end
  end

  private

  def style_params
    params.require(:style).permit(:name, :font1, :color1, :color2, :color3, :color4, :fontsize)
  end

Plus a form to edit the attributes you want users to be able to customize, a show.css.erb with something like

.text-primary {
  color: <%= @style.color1 %>;
}

and load the stylesheet on the user's page with a helper like

def user_style(user)
  if user.style.present?
    content_for :stylesheet_includes do
      stylesheet_link_tag user.style.path, media: 'all', 'data-turbolinks-track' => "reload"
    end
  end
end

and <%= yield :stylesheet_includes %> in the header of your application.html.erb. 'data-turbolinks-track' => "reload" is necessary to keep turbolinks from persisting one user's custom stylesheet across other user's domains.

Hosting CSS files for users

1 Answers1