add support for embeddable iframes (#268)

* add support for embedded iframes

* add css support for embedded iframes

* add formatting instructions for embedded iframes

* pass images through with non-whitelisted alt values

* fix tests

* review comments fixed

* add control print if non-whitelisted domain encountered

* add newline to error message

Author: mco-gh

FORMAT-GUIDE.md

@@ -63,6 +63,13 @@ You can also use this to target specific events, for instance:  \
      - Put a Youtube video link in the **Description** field of the Alt Text. in the format `https://www.youtube.com/watch?v=[video_ID]`
     > Specifying a start time is not supported at this time.
 
+1. Embedded Iframes
+
+    Iframes can be embedded by doing:
+     - Add an image in the document. The image can be a screenshot of the iframe for instance but it doesn't really matter since it won't be displayed but replaced by the embedded iframe.
+     - Add an "Alt Text" to the image by doing **Cmd+Opt+Y** or **Right click > "Alt Text..."**
+     - Put a full URL in the **Description** field of the Alt Text. in the format `https://www.domain.com/watch?foo=bar`. Note that for security reasons, iframe embbedding is limited to https URLs.
+
 1. Info Boxes
 
     For additional information that you would like to specially call-out in your codelab, there are two styles of info boxes:

claat/parser/gdoc/parse.go

@@ -19,6 +19,7 @@ import (
 	"fmt"
 	"io"
 	"net/url"
+	"os"
 	"sort"
 	"strconv"
 	"strings"
@@ -650,9 +651,31 @@ func list(ds *docState) types.Node {
 // image creates a new ImageNode out of hn, parsing its src attribute.
 // It returns nil if src is empty.
 // It may also return a YouTubeNode if alt property contains specific substring.
+// or an IframeNode if the alt property contains a URL other than youtube.
 func image(ds *docState) types.Node {
-	if strings.Contains(nodeAttr(ds.cur, "alt"), "youtube.com/watch") {
+	alt := nodeAttr(ds.cur, "alt")
+	errorAlt := ""
+	if strings.Contains(alt, "youtube.com/watch") {
 		return youtube(ds)
+	} else if strings.Contains(alt, "https://") {
+		u, err := url.Parse(nodeAttr(ds.cur, "alt"))
+		if err != nil {
+			return nil
+		}
+		// For iframe, make sure URL ends in whitelisted domain.
+		ok := false
+		for _, domain := range types.IframeWhitelist {
+			if strings.HasSuffix(u.Hostname(), domain) {
+				ok = true
+				break
+			}
+		}
+		if ok {
+			return iframe(ds)
+		} else {
+			errorAlt = "The domain of the requested iframe (" + u.Hostname() + ") has not been whitelisted."
+			fmt.Fprint(os.Stderr, errorAlt+"\n")
+		}
 	}
 	s := nodeAttr(ds.cur, "src")
 	if s == "" {
@@ -661,7 +684,11 @@ func image(ds *docState) types.Node {
 	n := types.NewImageNode(s)
 	n.Width = styleFloatValue(ds.cur, "width")
 	n.MutateBlock(findBlockParent(ds.cur))
-	n.Alt = nodeAttr(ds.cur, "alt")
+	if errorAlt != "" {
+		n.Alt = errorAlt
+	} else {
+		n.Alt = nodeAttr(ds.cur, "alt")
+	}
 	n.Title = nodeAttr(ds.cur, "title")
 	return n
 }
@@ -680,6 +707,20 @@ func youtube(ds *docState) types.Node {
 	return n
 }
 
+func iframe(ds *docState) types.Node {
+	u, err := url.Parse(nodeAttr(ds.cur, "alt"))
+	if err != nil {
+		return nil
+	}
+	// Allow only https.
+	if u.Scheme != "https" {
+		return nil
+	}
+	n := types.NewIframeNode(u.String())
+	n.MutateBlock(true)
+	return n
+}
+
 // button returns either a text node, if no <a> child element is present,
 // or link node, containing the button.
 // It returns nil if no content nodes are present.

claat/parser/gdoc/parse_test.go

@@ -180,7 +180,7 @@ func TestMetaTable(t *testing.T) {
 	}
 	meta := types.Meta{
 		Summary:    "Test summary",
-		Authors:     "John Smith <user@example.com>",
+		Authors:    "John Smith <user@example.com>",
 		Categories: []string{"Foo", "Bar"},
 		Theme:      "foo",
 		Status:     clab.Meta.Status, // verified separately
@@ -229,6 +229,8 @@ func TestParseDoc(t *testing.T) {
 		<p><img src="https://host/small.png" style="height: 10px; width: 25.5px"> icon.</p>
 
 		<p><img alt="https://www.youtube.com/watch?v=vid" src="https://yt.com/vid.jpg"></p>
+		<p><img alt="https://repl.it/?foo=bar" src="https://host/image.png"></p>
+		<p><img alt="https://example.com/?foo=bar" src="https://host/image.png"></p>
 
 		<h3><a name="a3"></a><span>What you&rsquo;ll learn</span></h3>
 		<ul class="start">
@@ -342,6 +344,16 @@ func TestParseDoc(t *testing.T) {
 	yt.MutateBlock(true)
 	content.Append(yt)
 
+	iframe := types.NewIframeNode("https://repl.it/?foo=bar")
+	iframe.MutateBlock(true)
+	content.Append(iframe)
+
+	img = types.NewImageNode("https://host/image.png")
+	img.Alt = "The domain of the requested iframe (example.com) has not been whitelisted."
+	para = types.NewListNode(img)
+	para.MutateBlock(true)
+	content.Append(para)
+
 	h := types.NewHeaderNode(3, types.NewTextNode("What you'll learn"))
 	h.MutateType(types.NodeHeaderCheck)
 	content.Append(h)

claat/parser/md/parse.go

@@ -638,9 +638,26 @@ func list(ds *docState) types.Node {
 // It returns nil if src is empty.
 // It may also return a YouTubeNode if alt property contains specific substring.
 func image(ds *docState) types.Node {
-	if strings.Contains(nodeAttr(ds.cur, "alt"), "youtube.com/watch") {
-		return youtube(ds)
-	}
+        alt := nodeAttr(ds.cur, "alt")
+        if strings.Contains(alt, "youtube.com/watch") {
+                return youtube(ds)
+        } else if strings.Contains(alt, "https://") {
+                u, err := url.Parse(nodeAttr(ds.cur, "alt"))
+                if err != nil {
+                        return nil
+                }
+                // For iframe, make sure URL ends in whitelisted domain.
+                ok := false
+                for _, domain := range types.IframeWhitelist {
+                        if strings.HasSuffix(u.Hostname(), domain) {
+                                ok = true
+                                break
+                        }
+                }
+                if ok {
+                        return iframe(ds)
+                }
+        }
 	s := nodeAttr(ds.cur, "src")
 	if s == "" {
 		return nil
@@ -682,6 +699,20 @@ func youtube(ds *docState) types.Node {
 	return n
 }
 
+func iframe(ds *docState) types.Node {
+        u, err := url.Parse(nodeAttr(ds.cur, "alt"))
+        if err != nil {
+                return nil
+        }
+        // Allow only https.
+        if u.Scheme != "https" {
+                return nil
+        }
+        n := types.NewIframeNode(u.String())
+        n.MutateBlock(true)
+        return n
+}
+
 // button returns either a text node, if no <a> child element is present,
 // or link node, containing the button.
 // It returns nil if no content nodes are present.

claat/render/gen-tmpldata.go

@@ -32,10 +32,10 @@ var files = map[string]struct {
 	file string
 	html bool
 }{
-	"html":         {"template.html", true},
-	"devsite":      {"template-devsite.html", true},
-	"md":           {"template.md", false},
-	"offline":      {"template-offline.html", true},
+	"html":    {"template.html", true},
+	"devsite": {"template-devsite.html", true},
+	"md":      {"template.md", false},
+	"offline": {"template-offline.html", true},
 }
 
 func main() {

claat/render/html.go

@@ -113,6 +113,9 @@ func (hw *htmlWriter) write(nodes ...types.Node) error {
 		case *types.YouTubeNode:
 			hw.youtube(n)
 			hw.writeBytes(newLine)
+		case *types.IframeNode:
+			hw.iframe(n)
+			hw.writeBytes(newLine)
 		}
 		if hw.err != nil {
 			return hw.err
@@ -371,3 +374,8 @@ func (hw *htmlWriter) youtube(n *types.YouTubeNode) {
 		`autoplay; encrypted-media; gyroscope; picture-in-picture" `+
 		`allowfullscreen></iframe>`, n.VideoID)
 }
+
+func (hw *htmlWriter) iframe(n *types.IframeNode) {
+	hw.writeFmt(`<iframe class="youtube-video" src="%s"></iframe>`,
+		n.URL)
+}