Error Generating Preview for Theme modifications

[Higherings]

Summary:

Fresh Canvas installation, using canvas release release/2021-06-23.26, configured with AWS S3 storage instead of local.
Uploading, viewing and deleting files works fine in the canvas Platform but it is failing when editing a theme and using new image files.

Trying to preview the new Theme after selecting a new file for any Image fails with:
An error occurred trying to generate this theme, please try again.

Steps to reproduce:

1. Create new Theme, update any Image with a new file, can be Watermark, Icon, etc.
2. Click Preview new Theme
3. Got error instead of the preview

Expected behavior:

Preview the Theme with new images

Actual behavior:

Error generating Theme preview

Additional notes:

Snippet of trace error in production.log:
/usr/lib/ruby/vendor_ruby/phusion_passenger/utils.rb:113:in `block in create_thread_and_abort_on_exception''', 'Access Denied', 1, '2021-06-25 21:46:05.801834', '2021-06-25 21:46:05.801834', 'myemail@domain.com', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36', 'post', 'a3e38ea3-5828-4a24-8008-649d25001f7e', 1, '---
type:
response_code: 500
request_id: a3e38ea3-5828-4a24-8008-649d25001f7e
session_id: 29584541e27408ed25891412256a6b15
meta_headers: o=brand_configs;n=create;t=Account;i=2;
format: !ruby/object:Mime::Type
synonyms:

• text/x-json
• application/jsonrequest
  symbol: :json
  string: application/json
  hash: -1173916991200071566
  HTTP_ACCEPT: application/json, text/javascript, application/json+canvas-string-ids,
  /; q=0.01
  HTTP_ACCEPT_ENCODING: gzip, deflate, br
  HTTP_HOST: mycanvas.domain.com
  HTTP_REFERER: https://mycanvas.domain.com/accounts/site_admin/theme_editor
  HTTP_USER_AGENT: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
  like Gecko) Chrome/91.0.4472.114 Safari/537.36
  PATH_INFO: "/accounts/2/brand_configs"
  QUERY_STRING: "?"
  REQUEST_METHOD: POST
  REQUEST_URI: https://mycanvas.domain.com/accounts/2/brand_configs
  SERVER_NAME: mycanvas.domain.com
  SERVER_PORT: ''80''
  SERVER_PROTOCOL: HTTP/1.1
  REMOTE_ADDR: 181.209.150.181
  path_parameters: ''{:controller=>"brand_configs", :action=>"create", :account_id=>"2"}''
  query_parameters: "{}"
  request_parameters: ''{"brand_config"=>{"variables"=>{"ic-brand-primary"=>"#E66135",
  "ic-link-color"=>"#4A90E2", "ic-brand-button--primary-bgd"=>"#4A90E2", "ic-brand-global-nav-bgd"=>"#4A90E2",
  "ic-brand-global-nav-logo-bgd"=>"#3B73B4", "ic-brand-watermark"=>#<ActionDispatch::Http::UploadedFile:0x00005595c3fb1388
  @tempfile=#Tempfile:/tmp/RackMultipart20210625-4379-8g1b1.png, @original_filename="Rayman
  Legends 24_10_2020 10_00_10.png", @content_type="image/png", @headers="Content-Disposition:
  form-data; name="brand_config[variables][ic-brand-watermark]"; filename="Rayman
  Legends 24_10_2020 10_00_10.png"\r\nContent-Type: image/png\r\n">}}, "js_overrides"=>"",
  "css_overrides"=>"", "mobile_js_overrides"=>"", "mobile_css_overrides"=>""}''
  exception_message: Access Denied
  hostname: ip-10-0-16-232
  pid: 4379
  ', 'Aws::S3::Errors::AccessDenied') RETURNING "id"^[[0m [production:1 primary]
  [29584541e27408ed25891412256a6b15 a3e38ea3-5828-4a24-8008-649d25001f7e] ^[[1m^[[36mSQL (5.1ms)^[[0m ^[[1m^[[35mCOMMIT^[[0m [production:1 primary]
  [29584541e27408ed25891412256a6b15 a3e38ea3-5828-4a24-8008-649d25001f7e] Created ErrorReport ID 10000000000045
  [29584541e27408ed25891412256a6b15 a3e38ea3-5828-4a24-8008-649d25001f7e]

[CANVAS_ERRORS] EXCEPTION LOG
Aws::S3::Errors::AccessDenied (Access Denied):
/var/canvas/vendor/bundle/ruby/2.6.0/gems/aws-sdk-core-3.109.2/lib/seahorse/client/plugins/raise_response_errors.rb:17:in `call'

[huangdengpan]

Aws::S3::Errors::AccessDenied (Access Denied):

[Higherings]

Hello,
Yes, the error says Access Denied. I want to clarify that the upload and display of files works in other places of Canvas, and I can see the files in the S3 bucket; also I tested giving ALL permissions to the user setup in amazon_s3.yml I even made the Bucket public to no avail.
Is it possible to know what actions was the Preview trying to do when it got the Access Denied error?

Thanks.

[huangdengpan]

have you try the command?

sudo chown -R canvasuser public/assets public/stylesheets/compiled config/environment.rb log tmp app/stylesheets/brandable_css_brands Gemfile.lock config.ru

[Higherings]

Hello, yes, thank you.
All the directories and files mentioned have the correct owner and permissions.
Does anyone have had the same issue? Remember we are using an S3 bucket as storage and not local storage.

[cns-mcannon]

@Higherings I'm currently dealing with the exact problem you are experiencing. I'm using S3 storage (no issues for storing course or user images/files), but when I try to update an image or upload a css/js file in a Theme I get the same exact error Aws::S3::Errors::AccessDenied (Access Denied).

I was curious if you had any luck resolving this? Thanks for any additional insight!

[Higherings]

@cns-mcannon Hello, I was trying to find out what is failing but never understood really what Canvas is trying to do, I have played with all the settings in S3 to no avail.
The last thing I was trying to do was to identify the if the errors happen in other Regions, currently my setup is in Oregon (my bucket too). Sometimes if the bucket is in N. Virginia the behavior is different but I lack the time to setup a test env.
If you find something please share.
Regards.

[cns-mcannon]

@Higherings I investigated this a bit more with the S3 error in mind and I think I have solved it, at least on my end.

I ended up changing the policy attached to the IAM user I created to give Canvas permission to access my S3 bucket. I started by giving it all permissions then worked backwards and found that it needed the "PutObjectAcl" permission in particular.

Here's the current policy attached to the IAM user for reference:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        },
        {
            "Sid": "VisualEditor1",
            "Effect": "Allow",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::your-bucket-name"
        }
    ]
}

[Higherings]

@cns-mcannon Great that it worked for you!
Thanks for the info. I have tried that but still is not working, I have put the S3 Full Access policy to the user and even with that it said AccessDenied. I really do not know what else to try.

[cns-mcannon]

@Higherings I'm guessing you already have this configured since file uploading to s3 in general is working - but just incase, here are my S3 bucket policy and bucket CORS config as well. For the record, I have my entire setup in N. Virginia:

{
    "Version": "2012-10-17",
    "Id": "Policy1582566802208",
    "Statement": [
        {
            "Sid": "Stmt1582566801132",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        }
    ]
}

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "https://*.your-domain.org"
        ],
        "ExposeHeaders": []
    }
]

Also, here is the most permissive IAM policy that I used to originally solve the issue:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "S3:*",
            "Resource": "arn:aws:s3:::your-bucket-name/*",
            "Condition": {}
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": "arn:aws:s3:::your-bucket-name",
            "Condition": {}
        }
    ]
}

The only other thing I can think of is that I recently setup is adding 'files_domain' to 'domain.yml' in the Canvas config files as recommended in the production guide. But that's about it.

Let me know if there is anything else I can post to help out.

[Higherings]

@cns-mcannon Thank you very much for the info and the insights.
I will run some test and let you know how it went.
Kind regards.

[Higherings]

@cns-mcannon it finally worked! After some tests definitely I was mixing some configurations but finally I found out what I was missing.
For all other file actions with S3 in Canvas you do not need the S3 Bucket to be Public, and this is specially important because if your bucket is Public, all the uploaded files (not just the ones for Themes) are accessible to anyone on the Internet.

Bottom line, to the Preview Theme page to work you need the objects to be public accesible but after that they do not need to remain public. I encourage you to block public access to your bucket once you finish creating the Themes.

I think this is a bug that need to be addresses at the application level so I will keep the Issue open.

[cns-mcannon]

@Higherings Glad it is working! I see what you mean about Public access and I removed the bucket policy that was allowing read access to all files. Thanks for following up.

[Higherings]

Finally, I understand what is happening, when you use S3 as storage all your files, uploads, attachments, and images go to the same Bucket; but the uploads and attachments are Private accessed by the SDK in the Canvas app, the images for Themes instead they are accessed directly to the S3 bucket.

So, if you have blocked ALL public access to your Bucket, the Themes Preview and its visualization won't work. The Canvas Create/Modify Theme will set the correct permissions (that's why the user needs the PutObjectACL permission) but you need to let unblocked the Public ACLs.

The new S3 Console have a section where you can turn off the Block Public Access to the Bucket so you can let some objects be public.

An remember, never put a Bucket Policy to make the bucket publicly available, it is not recommended nor needed.

Closing the issue.

[Higherings]

It would be great that the images for the Themes were also used via the SDK.

[amg-web]

@Higherings
Can you post what actually you did? we are facing same problem

[amg-web]

I have this error in logs:

[CANVAS_ERRORS] EXCEPTION LOG
Aws::S3::Errors::AccessControlListNotSupported (The bucket does not allow ACLs):

[Higherings]

Hello, You have to remove the Account S3 Block for Public Policies and ACLs, and also the Bucket S3 Block for public policies and ACLs. Canvas will set an ACL to each resource it uploads to S3. Regards.