Better error messages when embedding fails

app/assets/stylesheets/embed.css.scss

@@ -116,17 +116,33 @@ img.emoji {
   color: #999;
 }
 
+.clearfix {
+  clear: both;
+}
+
+
 header.discourse {
   padding-left: 10px;
+  padding-right: 10px;
   padding-bottom: 8px;
   font-size: 1.286em;
   border-bottom: 3px solid #ddd;
 
-  .button {
-    float:right;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  h3 {
+    margin: 0 auto 0 0;
+    font-size: 1.0em;
   }
 }
 
+.embed-error {
+  padding: 0 10px;
+}
+
 footer {
   font-size: 1.286em;
   margin-top: 0.5em;

app/controllers/embed_controller.rb

@@ -6,6 +6,16 @@ class EmbedController < ApplicationController
 
   layout 'embed'
 
+  rescue_from Discourse::InvalidAccess do
+    response.headers['X-Frame-Options'] = "ALLOWALL"
+    if current_user.try(:admin?)
+      @setup_url = "#{Discourse.base_url}/admin/customize/embedding"
+      @show_reason = true
+      @hosts = EmbeddableHost.all
+    end
+    render 'embed_error'
+  end
+
   def comments
     embed_url = params[:embed_url]
     embed_username = params[:discourse_username]

app/views/embed/embed_error.html.erb

@@ -0,0 +1,25 @@
+<header class='discourse'>
+  <h3><%= t 'embed.error' %></h3>
+  <%= link_to(image_tag(SiteSetting.logo_url, class: 'logo'), Discourse.base_url) %>
+  <div class='clearfix'></div>
+</header>
+<%- if @show_reason %>
+  <div class='embed-error'>
+    <%- if @hosts.present? %>
+      <p><%= t 'embed.referer' %><code><%= request.referer %></code></p>
+      <p><%= t 'embed.mismatch' %></p>
+
+      <ul>
+        <%- @hosts.each do |eh| %>
+          <li>
+            <%= eh.host %><%- if eh.path_whitelist.present? %><%= eh.path_whitelist %><% end %>
+          </li>
+        <%- end %>
+      </ul>
+    <%- else %>
+      <p><%= t 'embed.no_hosts' %></p>
+    <%- end %>
+
+    <p><%= link_to(t('embed.configure'), @setup_url, target: '_blank') %></p>
+  </div>
+<%- end %>

app/views/embed/loading.html.erb

@@ -1,8 +1,8 @@
-<header>
-  <%= t 'embed.loading' %>
+<header class='discourse'>
+  <h3><%= t 'embed.loading' %></h3>
   <%= link_to(image_tag(SiteSetting.logo_url, class: 'logo'), Discourse.base_url) %>
+  <div class='clearfix'></div>
 </header>
-
 <script>
   (function() {
     setTimeout(function() {

config/locales/server.en.yml

@@ -158,6 +158,11 @@ en:
   embed:
     start_discussion: "Start Discussion"
     continue: "Continue Discussion"
+    error: "Error Embedding"
+    referer: "Referer:"
+    mismatch: "The referer did not match any of the following hosts:"
+    no_hosts: "No hosts were set up for embedding."
+    configure: "Configure Embedding"
     more_replies:
       one: "1 more reply"
       other: "%{count} more replies"